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对 Web 开 发 者 来 说 ，Web 世 界 中 的 三 个 月 犹如 真实 世界 的 一 年 。 也 就 是 说 ， 目 本 书 上 一 版 出 
版 至 今 已 经 有 12 个 “Web 年 ”了 。 


作为 Web 开 发 者 ， 总 能 耳闻 目睹 一 些 新 的 技术 趋势 。 在 几 年 以 前 ，HIML5 和 CSS3 看 起 来 还 
很 远 远 ,但 由 于 当前 各 种 浏览 大 , 如 Chrome Safari Firefox Opera 以 及 正 等 ,都 在 努力 实现 HTMLS 
和 CSS3 规 范 中 的 各 项 内 容 ， 因 而 现今 企业 和 组 织 也 都 在 业务 系统 的 建设 过 程 中 纷纷 采用 这 些 新 
技术 。 

在 Web 应 用 交互 方面 ，HTML5S 和 CSS3 帮 助 开 发 者 打下 了 坚实 的 基础 。 新 技术 让 我 们 能 够 创 
建 更 易 开 发 和 维护 以 及 更 具 交 互 友 好 性 的 网 站 。HTMLS 提 供 了 能 够 定义 站 点 结构 并 能 入 内 容 的 
元 系 ， 这 就 意味 看 我 们 不 必 采 用 额外 的 属性 、 标 记 或 插件 。CSS3 提 供 了 高 级 选择 硕 、 图 像 增 强 
功能 以 及 更 好 的 字体 支持 ,让 我 们 的 网 站 更 有 吸引 力 ， 同时 将 我 们 从 以 往 使 用 图 片 替 代 技 术 、 复 
沐 的 JavaScript 代 人 码 或 者 图 像 工 具 等 旧 有 开发 模式 中 解放 出 来 。 更 好 的 可 访问 性 能 够 提升 动态 
JavaScript 客 户 端 应 用 对 残 隐 用 户 的 文 持 ,离线 应 用 文 持 特性 使 得 我 们 创建 不 需要 网 络 连接 即 可 运 
行 的 应 用 成 为 可 能 。 

在 本 书 中 ， 我 们 将 实践 HTMLS 和 CSS3 技 术 ， 即 使 你 的 用 户 所 使 用 的 浏览 器 目前 还 不 支持 这 
些 新 特性 ， 本 书 也 能 够 帮助 你 弄 清楚 如 何在 项 目 中 应 用 它们 。 在 开始 之 前 , 我 们 先 花 点 时 间 来 讨 
论 一 下 HTML5 及 相关 的 流行 观点 。 









































HTML5: 平台 还 是 规范 


HTMLS 是 一 个 规范 ， 它 描述 了 一 些 新 的 标签 和 标记 ， 同 时 还 包括 了 一 些 非 常 棒 的 JavaScript 
API, 但 HTML5 隐 入 了 炒作 与 浮 奔 的 洲 涡 。 于 是 ， 本 是 标准 的 HTML5 最 终 演变 成 了 平台 性 质 的 
HIMLS， 给 开发 者 和 用 户 造 成 了 很 多 困惑 。 在 某 些 情况 下 ，CSS3 规 范 中 的 一 些 模块 ,诸如 阴影 、 
渐变 和 转换 ,也 被 当成 了 HTML。 浏览 需 厂 商 正 试图 通过 他 们 支持 了 多 少 “HTMLS” 新 特性 的 方 
式 ， 来 达到 其 领先 于 其 他 浏览 融 厂 商 的 目的 。 于 是 ， 人 们 开始 提出 诸如 “用 HTML5 来 创建 网 站 ” 
这 类 的 奇怪 要 求 。 

本 书 的 大 部 分 内 容 都 将 聚焦 于 HTML5 和 CSS3 规 范本 身 ， 以 及 你 如 何 根据 所 有 常用 Web 浏 览 
顺 对 这 些 技术 的 描述 方式 来 使 用 这 些 技术 。 在 本 书 最 后 ， 我 们 将 探索 一 系列 跟 HTMLS 紧 密 相 关 























的 规范 ,它们 可 以 即刻 应 用 到 多 个 平台 上 ， 如 Geolocation ( 地 理 定 位 ) 和 Web Sockets。 虽 然 这 些 
技术 从 严格 意义 上 讲 并 非 HTMLS5, 但 它们 在 跟 HTML5 和 CSS3 协 同 工 作 时 却 可 以 帮助 你 创建 出 令 
人 难以 置信 的 丰富 应 用 。 





本 书 内 容 


本 书 的 每 个 章节 分 别 聚 焦 于 某 一 类 特定 问题 ,我们 可 以 使 用 HTMLS 和 CSS3 来 解决 这 些 问题 。 
每 章 都 有 一 个 概述 以 及 一 个 覆盖 全 章 标签 、 特 性 或 概念 的 汇总 列表 。 每 章 的 主要 内 容 将 拆 分 为 多 
个 实例 部 分 , 这 些 实例 将 介绍 特定 概念 ,并 引导 你 用 这 些 概 念 创建 一 个 简单 的 示例 。 各 章 内 容 分 
门 别 类 并 据 此 展开 讨论 。 相 较 于 将 内 容 分 成 HTML5 和 CSS3 两 部 分 来 讲解 ， 基 于 吸 待 解决 的 实际 
问题 进行 分 类 讨论 的 方式 更 具 实 际 意 义 。 你 会 发 现 其 中 几 章 重点 聚焦 于 CSS3 ， 同 时 CSS3 技 术 又 
很 合 时 宜 地 遍及 其 他 章节 。 

许多 实例 都 包含 了 一 个 “ 回 退 方案 ”的 章节 ， 为 某 些 用 户 的 浏览 需 无 法 直接 文 持 我 们 基于 新 
特性 的 实现 提供 了 解决 方案 。 我 们 将 通过 各 种 技术 实现 来 确保 回 退 方案 的 正确 运行 ， 从 第 三 方 
JavaScript 库 到 我 们 目 己 的 JavaScript 代 码 实 现 ， 以 及 jQuery 解决 方案 ， 等 等 。 

每 草 最 后 还 包括 了 一 个 “未 来 展望 ” 间 方 ， 其 中 讨论 了 当 新 特性 在 将 来 得 以 更 广泛 采纳 时 ， 
如 何 更 好 地 应 用 这 些 技术 。 


首先 ， 我 们 会 快速 了 解 一 下 TML5 和 CSS3 的 概貌 ， 并 认识 一 些 新 的 结构 化 标签 ， 它 们 可 以 
用 来 描述 你 的 页 面 内 容 。 之 后 ,我 们 构造 一 个 表单 ,你 将 有 机 会 了 解 表 单字 段 及 其 特性 ,诸如 日 
动 聚焦 和 就 地 编辑 等 。 从 那 开 始 ， 你 将 使 用 一 些 CSS3 的 新 选择 器 来 给 元 素 应 用 样式 ， 从 此 告别 
通过 给 内 容 添加 额外 标记 来 实现 的 旧 有 做 法 。 


接 下 来 ， 我 们 将 探究 HTMLS 的 音频 和 视频 文 持 ， 并 且 你 将 掌握 如 何 通过 画布 绘制 形状 。 你 
也 将 了 解 到 如 何 使 用 CSS3 的 阴影 、 渐 变 与 转换 等 特性 ， 以 及 字体 、 过 渡 和 动画 特性 。 


然后 ， 我 们 将 使 用 HTMLS 客 户 端的 一 些 新 特性 ， 如 Web Storage、IndexedDB 以 及 离线 文 持 ， 
来 创建 客户 端 应 用 程序 。 同 时 , 我 们 会 通过 Web Sockets 实 现 一 个 简单 的 聊天 服务 通信 程序 , 并 讨 
论 HITMLS 是 如 何 实现 路 域 消 息 发 送 的 。 你 还 将 有 机 会 接触 到 Geolocation API 的 使 用 , 以 及 管理 浏 
览 硕 历史 记录 的 知识 。 


本 书 聚 焦 于 在 现代 浏览 器 中 你 可 以 实现 怎样 有 趣 的 应 用 。 尽 管 一 些 附加 介绍 的 HTML5 和 
CSS3 新 特性 当下 还 不 具备 广泛 应 用 的 成 熟 度 ， 但 仍然 是 有 价值 的 。 你 将 在 第 11 章 进一步 了 解 到 
这 些 新 特性 。 

附录 A 是 全 书 所 涉及 新 特性 的 一 个 完整 列表 ， 并 提供 了 具体 特性 所 对 应 描述 章节 的 快速 参 
考 。 本 书 会 大 量 应 用 jQuery， 因 此 ,附录 B 会 为 你 提供 一 个 简短 的 jQuery 快速 入门 教程 。 附 录 C 将 
带 你 一 览 如 何 对 音频 和 视频 进行 编码 ， 以 便 在 HTML5 中 使 用 它们 。 



























































每 蔓 开 头 都 会 给 出 本 曹 所 涉及 的 HIMLS 特 性 ， 每 个 特性 的 浏览 硕 文 持 情 况 会 在 括号 内 以 训 
览 硕 名 称 简写 码 以 及 所 文 持 最 低 厂 本 号 来 表示 。 人 简写 码 的 含义 为 : C 代 表 Chrome 、F 代 表 Firefox、 
S 代 表 Safari1、IE 代 表 Internet Explorer、O 代 表 Opera、iOS 指 带 Safari 的 OS 设备、A 指 Android 济 | 





本 书 未 涉及 的 内 容 





我 们 在 本 书 里 不 会 讨论 耻 8 之 前 的 了 正 厂 本 。 微 软 已 经 在 积极 推动 用 户 放 弃 这 些 老 旧 浏览 硕 了 了 。 

我 们 也 不 会 涉及 HTML5 和 CSS3 的 方方面面 。 有 些 内 容 并 没有 太 大 的 讨论 音义， 因为 其 实现 
已 经 改变 ， 或 者 还 不 具备 实际 应 用 能 力 。 比 如 ，CSS 网 格 布 局 确实 不 错 "， 但 不 值得 我 们 花 太 多 
时 间 投 入 研究 , 除非 所 有 浏览 器 都 支持 该 特性 。“ 本 书 重点 为 你 演示 如 何 使 用 HTML5 和 CSS3 技 术 
来 为 最 大 用 户 群 体 增强 应 用 功能 。 

本 书 没有 涉及 HTML 和 CSS 的 基础 内 容 ， 因 此 ， 它 并 非 针 对 完全 初学 者 。 本 书 主 要 针对 已 经 
具备 了 较 多 的 HTML 和 CSS 知 识 的 Web 开 发 者 。 如 末 你 才刚 刚 接 触 HTML 和 CSS, 可 以 阅读 本 书 参 
考 文献 中 列 出 的 Jon Duckett 的 着 作 HTML and CSS: Desien and Build Websites[Ducl1]， 这 本 书 很 好 地 禾 
盖 了 HTML 和 CSS 基 础 内 容 。 也 可 以 参考 Jeffrey Zeldman 的 著作 Designing with Web Standards[Zel09]。 


本 书 假设 你 至 少 对 JavaScript 和 jQuery 有 着 基本 的 了 解 ， 我 们 将 使 用 它们 来 实现 很 多 回 退 解 
决 方 宁 。 附 录 B 提 供 了 一 个 关于 jQuery 的 简单 介绍 ， 内 容 禾 盖 了 本 书 使 用 的 jQuery 基本 方法 ， 你 
可 以 考虑 阅读 Christophe Porteneuve 的 Praematic Guide to JavasScript[Por10] 一 书 ， 将 其 作为 对 
JavaScript 的 深入 参考 ， 这 本 书 的 最 后 部 分 描述 了 非常 精彩 的 JavaScript 高 级 用 法 ， 而 我 相信 你 会 
做 得 更 好 。 























第 2 版 的 更 新 内 容 


本 书 第 2 版 结合 新 的 技术 发 展 趋势 对 内 容 作 了 全 面 更 新 ,并 删除 了 特别 针对 IE 7 及 之 前 正版 本 
的 内 容 。 增加 了 更 多 关于 HTML5 可 访问 性 的 内 容 、 更 稳定 上 且 切实 可 行 的 回 退 方案 以 及 9 个 新 实例 : 

口 实例 2: 用 <meter> 元 素 实 现 进 度 条 ; 

口 实例 4: 常见 问题 描述 列表 ; 

口 实例 8: 不 借助 JavaScript 验 证 用 户 输入 ; 
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口 实例 19: 使 用 SVG 绘 制 撩 量 图 形 ; 

口 实例 22: 视频 播放 的 可 访问 性 ; 

口 实例 16: 提升 表格 的 可 访问 性 ; 

口 实例 26: 通过 过 渡 和 动画 特性 移动 物体 ; 

口 实例 28: 使 用 IndexedDB 将 数据 存储 到 客户 端 数 据 库 中 ; 

口 实例 34: 通过 拖 放 来 整理 内 容 。 

另外 ， 你 将 在 第 11 间 探索 CSS3 的 弹性 盒子 模型 、 跨 域 资源 共享 、Web Workers 、 服 务 需 发 送 
事件 以 及 CSS 滤 镜 效 末 等 内 容 。 

除了 上 述 新 内 容 ， 其 他 实例 内 容 也 已 根据 需要 更 新 了 相应 的 回 退 解决 方案 。 同 时 ,你 会 发 现 
在 本 书 源 代码 中 新 增加 了 一 个 便利 的 基于 Node.js 实 现 的 Web 服 务 器 , 使 用 它 可 以 很 方便 地 测试 所 
有 路 多 浏览 天 的 应 用 功能 。 




















如 何 阅读 本 书 


没有 必要 从 头 至 尾 阅 读本 书 。 本 书 已 经 将 内 容 分 解 成 了 便于 单独 理解 与 学 习 的 各 个 实例 , 每 
个 实例 都 聚焦 于 一 到 两 个 核心 概念 。 每 一 章 都 会 涉及 一 些 相关 项 目 。 如 果 你 下 载 了 本 书 源 代码 ”， 
将 看 到 一 个 template/ 文 件 夹 , 其 中 包含 了 将 要 用 到 的 通用 模板 文件 , 这 将 会 是 一 个 不 错 的 着 手 点 。 


如 下 示例 代码 的 第 一 行 标注 了 该 示例 代码 文件 在 本 书 源 代码 中 的 位 置 : 


























html5_new _tags/index.html 


<Link rel="stylesheet" href="stylesheets/style.css"> 


如 朱 你 阅读 的 是 英文 电子 版 , 可 以 反击 该 标注 来 打开 整个 示例 代码 文件 , 以便 在 上 下 文中 查 
看 代码 。 这 个 标注 指出 了 示例 代码 文件 在 本 书 源 代 码 中 的 位 置 , 但 它 也 许 并 不 总 是 与 你 实际 操作 
的 文件 相 匹 配 。 


最 后 ,请 跟随 本 书 代 码 ， 放心 大 胆 地 练习 和 调整 本 书 提供 的 完整 示例 代码 。 接 下 来 ,让 我 们 
来 详细 了 解 一 下 运行 本 书 示例 代码 之 前 应 做 何 种 准备 。 


准备 工作 
你 需要 Firefox 20 或 更 高 版 本 、Chrome 20 或 更 高 版 本 、Opera 10.6 或 者 Safari 6 等 浏览 大 来 测 


试 本 书 代 码 。 由 于 每 蒜 浏览 旧 在 功能 实现 上 痢 会 有 一 些 差 别 ， 因此, 你 可 能 还 希望 在 所 有 浏览 带 
上 上 都 测试 我 们 编写 的 代码 。 有 一 侣 Android 或 iOS 设 备 在 手边 会 很 有 帮助 ， 但 不 是 必需 的 。 
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在 IE 浏 览 莫 上 进行 测试 工作 


你 同时 也 应 该 考虑 到 使 用 IE 8 及 更 高 版 本 来 测试 网 站 功能 的 现实 需要 ， 这 样 才 能 确保 我 们 创 
建 的 回 退 解决 方案 运行 无 误 。 最 简单 的 方式 就 是 在 VirtualBox 上 安装 微软 Windows 来 进行 测试 。” 
微软 在 Modern.IE 网 站 上 提供 了 人 免费 的 虚拟 机 , 可 用 于 测试 Web 应 用 程序 , 你 可 以 从 上 面 下 载 现成 
可 用 的 VirtualBox 、Parallels 或 VMware 镜像 文件 。 “这些 虚拟 机 软件 有 30 天 的 免费 试用 期 ， 30 天 之 
后 需要 重新 下 载 。 








Node.js 与 示例 服务 兹 


测试 书 中 的 某 些 特性 时 ， 需 要 通过 一 个 Web 应 用 服务 需 来 运行 HIML 和 CSS 文 件 。 另 外 ， 测 
试 其 他 的 一 些 特 性 时 也 需要 一 个 相对 复杂 的 后 台 应 用 服务 。 本 书 源 代 码 中 提供 了 一 个 应 用 服务 
右 ， 可 以 满足 你 的 需要 。 要 运行 这 个 服务 器 ， 你 需要 事先 按照 Node.js 网 站 “上 的 相关 说 明 安 装 好 
Node.jjs， 并 需要 0.10.0 或 以 上 版 本 的 Node.js， 以 避免 服务 右 朋 演 。 

你 还 需要 用 到 npm， 这 是 一 个 命令 行 工 具 ,， 用 来 安 闻 Node 打包 模块 ， 因 此 ， 你 可 以 用 它 来 安 
装 依赖 模块 。 这 个 工具 是 Node.js 安 装 文件 中 的 一 部 分 。 

一 旦 安装 好 了 Nodejs， 就 可 以 访问 本 书 站 点 并 下 载 示 例 代 但。 对 压缩 文件 进行 解压 ,然后 通 
过 终端 窗口 ( 在 Windows 平 台 则 是 命令 行 窗 口 ) 进入 解压 后 的 文件 所 在 位 置 ， 并 运行 以 下 命令 ， 
下 载 所 有 的 依赖 模块 〈 注 意 不 包括 $ 符 号 小 

$ npm install 

之 后 输入 以 上 命令 ， 同 样 不 要 输入 $ 符 号 : 

$ node server 

我 们 需要 在 端口 8000 上 运行 应 用 服务 硕 。 在 浏览 锅 中 加 载 http:/localhost:8000， 束 可 以 训 览 
应 用 示例 了 。 如 条 你 在 虚拟 机 上 进行 测试 ,虚拟 机 应 该 使 用 运行 示例 服务 融 的 计算 机 的 真实 王 地 
址 来 连接 。 最 棒 的 是 ， 与 server 文 件 放 置 在 同一 文件 夹 里 的 文件 与 文件 夹 将 会 通过 示例 服务 天 
来 运行 , 因此 , 你 可 以 特 接 使 用 本 书 源 代码 文件 夹 的 既 有 组 织 方式 , 来 跟随 本 书 内 容 按部就班 地 


进行 学 习 。 



































使 用 JavaScript 和 jQuery 的 注意 事项 


在 本 书 中 ， 我 们 将 大 量 使 用 JavaScript。 在 过 去 ， 在 页 面 <head> 标 签 里 加 载 JavaScript 文 件 是 
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一 种 很 常用 的 实践 方式 , 之 后 使 用 诸如 jQuery 的 document . ready ( ) 方 法 来 等 等 DOM ( Document 
Object Model， 文 档 对 象 模型 ) 准备 就 绕 ， 以 对 DOM 进 行 操作 。 但 是 现在 的 推荐 做 法 是 在 页 面 底 
部 加 载 所 有 的 脚本 , 这样 可 以 获得 更 好 的 性 能 。 因 此 , 我 们 也 将 这 么 做 , 所 有 的 脚本 包括 jQuery， 
都 将 放 在 页 面 底部 ， 但 是 需要 在 元 素 加 载 之 前 对 DOM 进 行 操作 的 场景 除外 。 

此 外 ， 我 们 将 在 合适 的 地 方 使 用 jQuery， 如 果 只 是 打算 简单 地 通过 元 系 ID 来 查找 某 个 元 素 ， 
我 们 将 直接 使 用 document .getELementById () 。 但 如 采 需 要 进行 事件 处 理 或 者 更 复杂 的 DOM 操 
作 以 在 下 8 中 实现 回 退 方案 时 ， 我 们 会 考虑 使 用 jQuery。 

换 而 言 之 ,我 们 要 “根据 任务 的 不 同 选择 合适 的 工具 ”。 这 可 能 会 种 来 一 些 矛 盾 ， 但 当 我 们 
开始 介绍 回 退 方案 以 使 应 用 在 老式 浏览 希 上 正 浓 运行 时 ， 这 将 是 一 个 不 错 的 折 中 办 法 。 在 后 面 ， 
我 会 解释 为 什么 要 这 样 做 。 























在 线 资源 

本 书 网 站 提供 了 连 到 讨论 论坛 以 及 勘误 表 的 链接 ， 并 提供 了 本 书 所 有 示例 源 代 码 的 下 载 链 
楼。 

如 果 你 在 阅读 过 程 中 发 现 了 错误 ,请 在 勘误 页 面 提交 勘误 项 ， 以 便 后 期 修改 。 本 书 英 文 电子 
版 中 ， 在 每 页 的 页 脚 处 都 提供 了 一 个 勘误 页 面 链 接 ， 方 便 你 提交 勘误 信息 。 

最 后 ,务必 访问 本 书 博客 Beyond HTML5 and CSS32。 我 将 发 布 本 书 相关 的 内 容 、 更 新 以 及 
应 用 示例 。 

准备 好 了 吗 ? 让 我 们 开始 精彩 纷呈 的 HIMLS 和 CSS3 之 旅 吧 。 
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HTML5 和 CSS3 概 述 


HTML5S 和 CSS3 是 万 维 网 联盟 ( W3C ) 及 其 工作 组 提出 的 两 个 新 标准 ,但 它们 的 意义 远 超出 
了 新 标准 本 号， 它们 将 是 你 每 天 都 会 用 到 的 下 一 代 Web 新 技术 ， 可 以 帮助 你 更 好 地 构建 现代 Web 
应 用 。 在 深入 探究 HTML5 和 CSS3 之 前 ， 我 们 和 完 来 讨论 一 下 这 两 个 标准 市 来 的 好 人 处， 以 及 面临 的 
一 些 挑 战 O 





1.1 强大 的 Web 开发 平台 


HTML5 包 含 了 众多 新 特性 , 力图 打造 更 好 的 Web 应 用 开发 平台 。 从 更 丰富 的 描述 性 标签 、 更 
好 的 路 站 点 以 及 路 窗口 通信 到 动画 和 完善 的 多 媒体 文 持 ， 人 借助 于 HTMLS， 开 发 者 就 可 以 拥有 大 
量 新 工具 ， 创 造 出 更 出 色 的 用 户 体验 。 





1.1.1 向 后 兼容 

我 们 之 所 以 学 习 HTML5, 最 主要 的 原因 之 一 是 现今 的 绝 大 多 数 浏 览 融 都 支持 它 。 即 使 在 IE 6 
上 ， 你 也 可 以 使 用 HTMLS 并 慢 慢 转换 旧 的 标记 。 你 甚至 可 以 通过 W3C 验 证 服务 来 验证 HTMLS 代 
码 的 标准 化 程度 ( 当然 ， 这 也 是 有 条 件 的 ， 因 为 标准 仍 在 不 断 演进 )。 

如 果 你 用 过 HTML 或 XML， 肯 定 会 知道 文档 类 型 ( doctype ) 声明 。 其 用 途 在 于 告知 验证 磊 
和 编辑 化 可 以 使 用 哪些 标签 和 属性 ， 以 及 文档 将 如 何 组 织 。 此 外 ， 众 多 Web 浏 览 副 会 通过 它 来 决 
定 如 何 泻 染 页 面 。 一 个 有 效 的 文档 类 型 常常 通知 浏览 硕 用 “标准 模式 ”来 演 染 页 面 。 

以 下 是 许多 网 站 使 用 的 相当 大 长 的 XHTML 1.0 Transitional 文档 类 型 . 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 


相对 于 这 一 长 串 ，HTMLS 的 文档 类 型 声明 出 乎 意料 地 人 简单。 

















html5_why/index.html 
<!IDOCTYPE htmL> 
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把 上 述 代码 放 在 文档 开头 ， 就 表明 在 使 用 HTML5 标 准 。 当 然 ， 你 不 能 使 用 目标 浏览 器 尚 不 
支持 的 新 HTML5 元 紊 ， 但 你 的 文档 会 验证 为 HTML5 文 档 。 


1.1.2 ”更 具 摘 述 性 的 标记 


每 个 版 本 的 HTML 都 会 引入 新 标记 ,但 从 未 像 HTML5 这 样 增 加 了 这 么 多 与 描述 内 容 下 接 相关 
的 标记 。 第 2 章 将 介绍 更 多 的 元 素 ， 如 定义 各 级 标题 、 页 脚 、 寻 航 区 块 、 侧 边栏 以 及 文章 等 ， 同 
时 还 将 介绍 数值 计量 元 素 (meter )、 进 度 条 以 及 如 何 目 定义 数据 属性 ， 了 解 如 何 标识 数据 。 








1.1.3 ”更 加 简化 

在 HIML5 中 ， 大 量 的 元 素 得 以 改进 ， 并 有 了 更 明确 的 默认 信 。 我 们 已 经 见识 了 文档 类 型 的 
声明 是 多 么 人 简单, 除 此 之 外 还 有 许多 其 他 输入 方面 的 简化 ,例如 ,以 往 我 们 一 下 这 样 定义 JavaScript 
的 标签 : 

<script language="javascript" type="text/javascript"> 

但 在 HTML5 中 ， 我 们 希望 折 有 的 <script> 标 签 定 义 的 都 是 JavaScript， 因 此 ,你 可 以 放心 地 
省 略 多 余 的 属性 〈 指 Language 和 type )。 

如 采 想 要 指定 文档 的 字符 编码 为 UTF-8 方 式 ， 只 需 按 下 面 的 方式 使 用 <meta> 标 签 即 可 : 

<meta charset="utf-8"> 

上 述 代 码 取代 了 以 往 笨拙 的 、 通 常 徘 复 制 粘 贴 方式 来 完成 处 理 的 方式 : 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
入 日 外 
1.1.4 用 户 弄 面 增强 


用 户 界面 对 于 Web 应 用 而 言 十 分 重要 ， 以 至 于 我 们 每 时 每 刻 都 在 想方设法 让 浏览 右 呈 现 出 我 
们 期 望 的 效果 。 过 去 , 为 了 设计 出 表 或 圆 角 效果 ,我 们 不 得 不 借助 JavaScript 库 , 或 者 添加 一 大 堆 
的 额外 标记 来 实现 目标 样式 。HTML5 和 CSS3 让 这 种 处 理 方式 成 为 过 去 时 。 




















1// 。 小 乔 爱 间 ， 
寺 ”但 是 我 喜欢 XHTML 的 自动 闭合 标签 ， 在 HTML5 里 还 能 这 么 用 吗 ? 


当然 可 以 ! 看 看 Polyglot 标 记 。 与 HTML 相 比 ， 许 多 开发 者 因 XHTML 对 标记 的 严格 
要 求 而 更 喜欢 用 它 。XHTML 文档 强制 要 求 属 性 带 引 号 、 内 容 标 签 自动 闭合 、 使 用 小 写 属性 
名 称 ， 给 互联 网 带 来 了 一 种 组 织 良 好 的 标记 表达 方式 。 迁 移 到 HIMLS 并 不 意味 着 方式 的 改 


1. http://Wwww.w3.org/TR/html-polyglot/ 
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变 。HTMLS 文档 会 验证 你 使 用 的 是 HIMLS 风格 的 语法 还 是 XHTML 风格 的 语法 。 但 在 你 
开始 之 前 ， 先 来 了 解 使 用 自动 闭合 标签 的 影 只 

为 E 无 法 正确 处 理 XHML 页 面 的 application/xml+xhtml MIME 类 型 (多 用 途 互 
联网 邮件 扩展 ，Multipurpose Internet Mail Extensions)， 所 以 大 多 数 的 Web 服务 器 以 
text/html MIME 类 型 向 浏览 器 发 送 HTML 文档 。 由 于 这 个 原因 ， 浏 览 器 常常 会 别 除 自动 
闭合 标签 ， 因 为 浏览 器 并 不 认为 自动 闭合 标签 是 合法 的 HTML 内 容 。 例 如 ， 如 果 在 一 个 div 
标签 上 有 个 自 关闭 的 script 标 签 ， 像 这 样 : 

<script language="javascript" src="application.ijs" /> 

<h2>He lp</h2> 

浏览 器 将 移 除 自动 闭合 的 针 杠 “/ ， 然 后 浴 染 器 会 认为 h2 标签 在 script 标 签 中 , 这样 就 
永远 不 会 关闭 ! 这 就 是 为 什么 Script 标签 都 要 带 一 个 明显 的 关闭 标签 的 原因 ， 即 使 自动 闭合 
标签 在 XHTML 里 是 合法 的 标记 ， 你 也 要 这 么 做 。 

如 果 在 HIMLS 文档 中 使 用 自动 闭合 标签 ， 就 要 注意 类 似 的 问题 。 确 保 用 正确 的 MIME 
类 型 向 浏览 器 发 送 页 面 。 关 于 这 些 问 题 的 更 多 信息 请 参考 : http://www.webdevout.net/articles/ 


beware-of-xhtmj#myths 。 


1.1.5 ”更 好 的 表单 控件 


HTML5 提 供 了 更 多 更 酶 的 用 户 界 面 控 件 。 长 期 以 来 ,开发 者 不 得 不 通过 JavaScript 和 CSS 来 
实现 滑动 条 、 日 历 日 期 选择 需 以 及 颜色 选择 融 等 控件 。 但 在 HIML5 中 ， 就 如 同 下 拉 沫 单 、 复 选 
框 以 及 单 选 按钮 等 控件 一 样 , 这 些 都 已 被 定义 为 标准 控件 元 素 。 你 将 在 第 3 草 学 习 怎 样 使 用 它们 。 
虽然 并 不 是 所 有 浏览 融 都 文 持 这 些 新 控件 ， 但 Web 应 用 开发 人 员 应 该 时 刻 保 持 关 注 。 

除了 不 用 依赖 JavaScript 库 就 可 以 方便 地 提升 可 用 性 , 还 有 一 个 好 处 就 是 提升 了 可 访问 性 。 屏 
幕 阅 读 咒 和 其 他 浏览 需 能 够 以 特定 的 方式 实现 这 些 控件 ， 以 便 更 好 地 为 残障 人 士 服务 。 




















1.1.6 ”可 访问 性 增强 


使 用 新 的 HTML5 元 系 清 晰 地 摘 述 我 们 的 内 容 ， 可 以 让 屏 硕 阅读 带 等 程序 更 容易 处 理 这 些 内 
容 。 比 如 网 站 导航 ， 通 过 <nav> 而 不 是 <div> 或 是 无 序列 表 来 查找 会 更 容易 识别 。 相 应 地 ， 也 可 
以 很 方便 地 重新 组 织 或 完全 跳 过 页 脚 、 侧 边栏 以 及 其 他 内 容 。 这样 一 来 , 解析 页 面 的 难度 就 会 大 
大 降低 ， 从 而 为 依赖 辅助 技术 手段 的 人 们 市 来 更 好 的 用 户 体 验 。 为 外 ,元 系 的 新 属性 可 以 指定 元 
素 角色 ， 使 得 屏幕 阅读 带 更 容易 处 理 这 些 元 素 。 我 们 将 在 第 5$ 章 讲述 如 何 使 用 新 属性 ， 以 便 屏 幕 
阅读 着 可 以 充分 利用 它们 。 






































4 第 1 和 章 HTMLS 和 CSS3 概述 


1.1.7 更 高 级 的 选择 器 

CSS3 的 选择 器 能 够 帮助 你 识别 出 表格 里 的 奇数 行 和 偶数 行 、 所 有 已 勾 选 的 复 选 框 ， 甚 至 是 
段落 里 的 最 后 一 段 文字 。 你 可 以 用 更 少 的 代码 和 标记 去 完成 更 多 事情 。 同时, 想 要 对 无 法 编辑 的 
HTML 内容 进行 样式 设置 就 变 得 轻而易举 。 在 第 4 章 中 , 我 们 将 了 解 如 何 有 效 地 使 用 这 些 选 择 器 。 











1.1.8 视觉 效 果 

给 文本 和 图 片 添加 阴影 可 以 增加 网 页 的 层次 感 ， 而 添加 计 变 效果 则 可 以 丰 遇 视觉 空间 感 。 使 
用 CSS3 能 够 很 方便 地 给 元 系 添 加 阴影 和 渐变 效果 ， 让 你 彻底 告别 依赖 背景 图 片 或 额外 标记 的 旧 
有 实现 方式 。 另 外 ，CSS3 还 能 够 使 用 变形 ( transformations ) 功能 来 实现 圆 角 、 斜 切 以 及 旋转 等 
各 种 效果 。 我 们 将 在 第 8 章 中 介绍 这 些 功 能 。 








1.1.9 更 少 依赖 插件 的 多 妹 体 功能 实现 


在 HIMLS 中 ， 已 不 再 需要 借助 Flash、Silverlight 等 插件 技术 ， 就 可 以 实现 视频 、 音 频 播 放 以 
及 矢量 图 浏览 等 功能 了 。 尽管 基于 Flash 技 术 实 现 的 视频 播放 央 在 使 用 上 相对 简单 , 但 它 无 法 在 市 
场 占 有 率 巨大 的 Apple 移 动 设备 上 使 用 , 因此 , 我 们 不 得 不 考虑 替代 Flash 的 实现 技术 。 第 7 章 将 介 
绍 如 何 发 挥 HTML5 的 音频 和 视频 功能 的 威力 。 











1.1.10 ”应 用 能 力 增强 


过 去 ， 从 ActiveX 控 件 到 Flash， 开 发 者 符 试 用 各 式 各 样 的 技术 来 创建 功能 更 丰富 、 更 具 交 互 
性 的 Web 应 用 。 现 在, HTML5 提 供 了 令 人 慰 叹 的 特性 , 让 你 方便 地 完成 复 薪 需求 , 在 东 些 场景 下 ， 
甚至 可 以 完全 不 依 徘 第 三 方 技 术 。 





1.1.11 ”路 文档 通信 
Web 浏 览 器 不 允许 跨 域 脚 本 间 的 交互 。 这 个 限制 使 得 最 终 用 户 免 受 跨 站 脚本 攻击 的 威胁 ,要 
知道 ， 一 直 以 来 跨 站 脚本 经 常 被 用 来 对 毫 无 戒心 的 网 站 访问 者 进行 各 种 各 样 的 恶意 攻击 。 


可 是 , 这 也 阻止 了 所 有 器 站 脚本 的 交互 , 即使 是 我 们 目 己 与 的 脚本 并 且 硝 信 这 些 代 码 是 安全 的 
情况 下 也 无 济 于 事 。HITMLS 包 含 了 一 个 既 安 全 又 便于 实现 的 变通 方案 。10.2 节 中 将 介绍 相关 内 容 。 








1.1.12 Web Sockets 


HTML5 提 供 了 Web Sockets 文 持 ， 实 现 训 览 融 与 服务 产 之 间 的 持久 连接 ， 不 再 需要 如 旧 有 方 
式 那 般 不 断 轮 询 服务 端 以 获取 最 新 进度 。Web 页 面 可 以 订阅 一 个 套 接 字 ， 之 后 服务 闪 推 送 通知 给 
用 户 。 我 们 会 在 10.3 市 中 介绍 它 。 
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1.1.13” 客 尸 端 存储 

众所周知 ，HTML5 是 一 种 Web 开 发 技术 ,但 借助 新 增 的 Web Storage 和 Web SQL Database API 
(Application Programming Interface， 应 用 程序 接口 ), 就 可 以 创建 将 数据 完全 保存 在 客户 端的 Web 
应 用 程序 。 第 9 草 会 涉及 这 部 分 内 容 。 


1.2 ”注定 充满 挑战 的 未 来 之 路 
HTMLS 和 CSS3 的 发 展 之 路 ， 注 定 不 会 一 马 平川 。 


1.2.1 处 理 老 版 本 的 IE 


IE 仍然 有 着 大 量 用户 ， 而 下 9 之 前 的 版 本 对 HTML5 和 CSS3 的 支持 很 差 。IE 10 的 支持 虽然 有 
了 极 大 提升 ,但 尚未 得 到 广泛 使 用 ， 并且 Window Vista 及 之 前 的 操作 系统 用 户 无 法 使 用 IE 10。 但 
这 些 并 不 是 说 我 们 无 法 使 用 HTMLS 和 CSS3 技 术 。 我 们 可 以 考虑 让 网 站 在 正 下 运作 起 来 ， 但 它 达 
不 到 我 们 为 Chrome 和 Firefox 开 发 的 版 本 那样 的 效果 。 我 们 只 是 为 下 提供 了 备 选 方案 , 以 避免 刺激 
用 户 以 及 造成 客户 的 流失 。 你 会 在 本 书 中 学 到 大 量 相 关 的 处 理 方法 。 














1.2.2 ”可 访问 性 

不 管 是 有 视觉 或 听觉 障碍 的 残障 用 户 ,， 还 是 使 用 老式 浏览 妖 、 网 速 慢 ,或 是 使 用 移动 设备 的 
用 户 ， 他 们 与 网 站 交互 的 需求 都 必须 得 到 满足 。HTML5 引 入 了 诸如 <audio>、<video> 以 及 
<canvas> 这 样 的 新 元 素 。 视 频 与 首 频 一 直 就 有 可 访问 性 的 问题 ， 而 <canvas> 元 素 又 提出 了 新 的 
挑战 。<canvas> 让 我 们 可 以 在 HTML 文 档 里 通过 JavaScript 来 创建 图 像 。 这 对 视觉 障碍 者 来 说 就 
是 个 问题 ， 同 时 对 那些 约 有 5% 的 关闭 JavaScript 支 持 的 用 户 群 而 言 ， 这 也 是 个 麻烦 。” 








我 喜欢 蛋糕 。 我 更 喜欢 馅 饼 ， 但 蛋糕 确实 也 很 不 错 。 在 蛋糕 上 面 抹 点 糖 霜 就 更 美 了 。 


开发 Web 应 用 程序 时 , 要 记得 所 有 漂亮 的 用 户 界面 以 及 炫 酷 的 JavaScript 特 效 就 像 蛋 糕 上 
点 组 着 的 糖 霜 。 网 站 没有 了 这 些 点 组 并 不 影响 功能 ， 就 像 蛋 糕 一 样 ， 有 了 它 这 个 基础 ， 才 有 
可 能 在 其 之 上 添加 糖 霜 。 


我 遇 到 过 一 些 并 不 喜欢 糖 霜 的 人 , 他们 特意 从 蛋糕 上 史 掉 糖 霜 。 我 还 遇 到 过 有 些 人 因为 
各 种 各 样 的 原因 一 直 在 使 用 没有 JavaScript 支 持 的 Web 应 用 。 


为 这 些 人 烘 烧 一 个 美味 的 蛋糕 ， 然 后 再 为 那些 想 要 糖 霜 的 人 打上 粮 霜 。 


GD http://visualrevenue.com/blog/2007/08/eu-and-us-javascript-disabled-index.html 
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使 用 新 技术 时 知 要 注意 可 访问 性 问题 ， 殊 如 前 面 为 下 用户 考虑 的 那样 ， 也 应 该 针对 HTML5 
的 新 特性 ， 提 供 合 适 的 备用 方案 。 


1.2.3 ”废弃 的 标签 


HTML5 引 入 了 大 量 新 元 了 淼 ， 但 同时 规范 也 废弃 了 相当 多 的 稼 用 元 又 ， 这 些 元 么 很 可 能 曾经 
是 你 Web 页 面 上 的 “常客 ”7 。 现 在 你 必须 移 除 它们 来 迎接 新 时 代 。 


首先 ,一 些 表现 元 素 都 废 大 了 。 如 采 你 的 代码 中 还 有 残留 ， 一定 要 把 它们 清除 ! 用 语义 正确 
的 元 素 符 代 它 们 ， 并 通过 CSS 来 设置 其 样式 。 


D basefont 
DQ big 

Dj center 
D font 

Us 

D strike 
DQ tt 

Du 


其 中 的 一 些 标签 在 语义 上 非常 模糊 ,但 仍 有 大 量 如 Dreamweaver 这 样 的 可 视 化 编辑 途 生 成 的 
页 面 ， 它 们 还 包含 着 众多 <font> 和 和 <center> 标记 。 


此 外 ，HTML5 也 移 除 了 对 框架 的 支持 。 框 架 在 PeopleSoft、Microsoft Outlook Web Access 以 
及 目 定 义 门 户 等 企业 Web 应 用 中 颇 受 欢迎 。 尺 管 应 用 如 此 广泛 , 但 框架 引发 了 太 多 的 可 用 性 以 及 
可 访问 性 方面 的 问题 ， 以 至 不 得 不 吻 除 它 。 也 就 是 说 ，HTML5 中 的 以 下 元 素 已 废弃 。 


UD frame 




















UD frameset 
UD noframes 


在 HIMLS 中 , 应 该 用 CSS 蔡 代 框 架 来 设置 界面 布局 。 如 果 使 用 框架 是 为 了 确保 应 用 的 各 个 页 
面 会 呈现 一 样 的 页 眉 、 页 脚 以 及 导航 条 ， 那 么 借助 Web 开 发 框架 里 的 一 些 工 具 也 能 完成 同样 的 工 
作 。 比 如 ， 你 可 以 试 着 用 搜索 引擎 搜 索 一 下 position:fixed CSS 属 性 。 

同时 ， 以 下 元 素 已 被 废弃 并 有 了 更 好 的 符 代 者 。 

口 abbr 取 代 了 acronynm 

口 object 取 代 了 apptLet 























GD http:/www.w3.org/TR/html5-diff/ 
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口 UL 取代 了 dir 
此 外 ， 很 多 属性 也 已 失效 。 其 中 包括 下 述 表现 属性 。 


D align 

D body 标签 上 的 Link、vLink、aLink 以 及 text 属 性 

D bgcolor 

OD height 和 width 

D iframe 标签 的 scroLLing 属 性 

D valign 

口 hspace 和 vspace 

D table 标 签 的 cellpadding、cellspacing 以 及 border 属 性 


大 量 WordPress 模 版 中 使 用 的 <head> 标 签 的 profile 属 性 ， 在 HTML5 中 也 已 废弃 。 


最 后 ，<img> 和 <iframe> 标 签 的 Longdesc 属 性 也 被 废弃 了 ， 这 让 可 访问 性 倡导 者 很 失望 ， 
因为 Longdesc 属 性 是 为 屏幕 阅读 硕 用 户 提 供 附 加 描述 信息 的 通用 方式 。 

如 果 计 划 在 已 有 的 网 站 中 使 用 HTMLS 技 术 ， 就 应 该 找到 上 述 的 元 素 ， 移 除 或 用 更 具 语义 性 
的 元 素 替 代 它 们 。 还 请 确保 所 有 的 页 面 都 经 过 W3C 验 证 服务 ”的 验证 ， 这 能 够 帮助 你 定位 到 废弃 
的 标签 和 属性 。 




















1.2.4 ”市 场 利 药 的 激烈 竞争 


IE 并 不 是 唯一 一 个 对 HTMLS 和 CSS3 反 应 扩印 的 浏览 希 。Google、Apple 以 及 Mozilla 基 金 会 也 
都 有 各 自 的 计划 和 安排。 同样 地 ， 他们 都 在 激烈 争夺 标准 发 展 的 话语 权 。 他 们 争论 看 视频 和 首 频 
编 解 查 硕 的 文 持 标准 ， 并 在 目 家 浏览 硕 厂 本 中 引入 目 己 的 标准 。 比 如 ，Safari 可 以 通过 <audio> 
标签 播放 MP3 ， 但 不 支持 ogg 文件 格式 ; 而 Firefox 则 支持 ogg 文件 ， 却 不 支持 MP3 文 件 。 

所 有 的 这 些 分 疏 终 将 得 以 解决 。 在 标准 统一 之 前 ， 可 以 对 我 们 的 实现 思路 做 出 合理 的 选择 ， 
要 么 限制 用 户 的 浏览 融 选 择 , 要 么 针对 各 个 主流 浏览 需 分 别提 供 解决 方案 。 这 件 事 并 没有 听 起 来 
那么 可 怕 。 第 7 章 将 对 此 做 进一步 介绍 。 














1.2.5 HTMLS5 和 CSS3 的 标准 仍 在 不 断 发 展 中 


HTMLS 和 CSS3 的 规范 仍 未 定稿 , 这 就 意味 着 现 有 规范 中 的 条 款 都 有 可 能 调整 。 即 使 Firefox、 
Chrome 以 及 Safar 已 经 对 HTMLS 实 现 了 强大 的 文 持 ， 只 要 规范 一 变 ， 浏 览 需 也 必须 做 出 相应 调 
整 ， 这 种 情况 下 就 会 对 网 站 造成 不 利 影响 ， 甚 至 无 法 正常 运行 。 比 如 ， 在 过 去 几 年 中 ，CSS3 中 








GD http://validator.w3.org/ 
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的 box-shadow 属 性 先是 被 规范 删除 ， 而 后 又 加 了 上 去 。 此 外 ，Web Sockets 协 议 也 被 修改 过 ， 完全 
打破 了 以 往 客户 闯 与 服务 端 间 的 通信 模式 。 

如 来 能 够 紧 跟 HTML5 和 CSS3 标 准 的 进展 ， 并 保持 最 新 的 状态 ， 你 将 总 是 领先 一 步 。 有 关 
HTML5 规 范 可 参考 : http:/www.w3.org/TR/html5/。CSS3 被 分 为 几 个 模块 ， 可 从 这 里 获悉 其 最 新 
进展 : http://www.w3.org/Style/CSS/current-work。 

一 旦 某 项 HTMLS 和 CSS3 功 能 无 法 在 目标 浏览 絮 里 正常 运行 ， 就 可 以 考虑 使 用 JavaScript 和 和 
Flash 来 实现 这 项 功能 。 应 该 构建 适合 所 有 用 户 的 可 徘 的 解决 方案 , 随 大 时间 的 推移 , 你 将 能 够 在 
不 改变 既 有 实现 的 情况 下 ， 移 除 JavaScript 和 其 他 备 选 方案 。 

与 其 展望 未 来 ， 不 如 现在 就 开始 我 们 的 HTML5 之 旅 。 在 下 一 章 中 ,一 大 批 的 新 式 结 构 化 标 
签 在 等 看 你 去 探究 。 





























第 一 部 分 





用 尸 界 面 增强 


本 书 前 面 几 个 章节 将 探讨 如 何 利 用 HIML5S 和 
CSS3 来 提升 呈现 给 用 户 的 界面 效果 。 我 们 将 讨论 如 
何 创 建 更 栈 的 表单 、 可 轻松 设置 样式 的 表格 ， 以 及 如 
何 为 辅助 工具 增强 页 面 可 访问 性 。 另 外 ， 还 将 介绍 如 
何 通过 内 容 生成 来 改进 打印 样式 表 的 可 用 性 ， 并 使 用 
新 的 contenteditable 属性 实现 就 地 编辑 功能 。 











先 说 一 个 普遍 影响 当今 Web 开 发 者 的 严重 问题 一 一 div 依 赖 症 。 这 一 积 习 使 得 Web 开 发 者 过 度 
使 用 <div> 标 签 以 及 诸如 banner、sidebar、article、footer 等 id 属 性 来 包装 元 素 。 同 时 ， 这 
种 开发 方式 的 传染 性 也 很 强 ， 在 Web 开 发 者 中 迅速 传播 开 来 。 由 于 <div> 标 签 是 不 可 见 的 ， 所 以 
轻微 的 依赖 几 年 间 都 可 能 察 党 不 到 。 


以 下 是 典型 的 “div 依 赖 症 ”代码 : 


<div id="page"> 
<div id="navbar_wrapper"> 
<div id="navbar"> 














</div> 


这 上段 代码 中 有 一 个 无 序列 表 ， 它 是 个 块 级 (block ) 元 素 ， 被 两 个 同 为 块 级 元 素 的 <div> 标 签 
包围 。 块 级 元 系 独 占 一 行 ， 而 行内 ( inline ) 元 系 并 不 要 求 换行 ， 所 以 这 个 <div> 标 签 并 没有 任 
何 特 定 的 语义 含义 。 无 序列 表 外 围 两 个 <div> 标 签 的 id 属 性 告诉 我 们 <div> 标 签 各 日 的 用 途 , 但 
实际 上 , 至 少 可 以 移 除 其 中 的 一 个 <div> 标 签 而 不 会 带 来 任何 影响 。 过 度 使 用 标记 会 让 代码 膨胀 ， 
并 且 很 难 给 网 页 设置 样式 ， 网 页 维护 起 来 也 比较 困难 。 


不 过 ， 还 是 有 希望 的 ! HIMLS 规 范 引 入 了 新 的 用 于 描述 内 容 的 语义 标签 ， 为 组 织 页面 中 的 
标签 提供 了 解决 方案 。 由 于 太 多 的 开发 者 需要 处 理 侧 边栏 ( sidebar )、 文 档 页 由 (header )、 页 脚 
( footer ) 以 及 区 块 ( section )， 因 此 ，HTMLS 规 范 引 入 了 新 的 专用 标签 ， 用 于 将 页 面 划 分 成 不 同 
的 逻辑 区 域 。 

除了 以 上 这 些 新 的 结构 化 标签 , 本 章 还 会 讨论 一 些 其 他 的 标签 , 比如 <meter> 和 <progress> 
标签 ， 并 讨论 如 何 使 用 HTML5 中 新 的 自 定 义 属性 在 元 率 里 航 入 数据 ， 这 种 全 新 的 方式 取代 了 以 
往 稼 用 的 使 用 类 或 已 有 属性 的 方式 。 总 之 ， 本 章 将 介绍 如 何 用 正确 的 标签 做 正确 的 事情 。 有 了 
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HTML5， 就 可 以 在 你 的 职业 生涯 里 消灭 div 依 赖 症 。 
以 下 列 出 了 本 和 草 探 讨 的 新 元 素 及 新 特性 。 


口 <header>: 定义 页 面 或 区 块 的 页 眉 区 域 (CS、F3.6、S4、 了 8、O 10 )。 

口 <footer>: 定义 页 面 或 区 块 的 页 脚 (C5、F3.6、S4、IE8、0O 10)。 

口 <nav>: 定义 页 面 或 区 块 的 导航 条 (C5、F3.6、S4、IE8、0O 10)。 

口 <section>: 区 顽 ， 定 义 页 面 或 内 容 分 组 的 逻辑 区 域 (CS、F3.6、S4、IE8、O 10 )。 

口 <article>: 定义 文 草 或 完整 的 一 块 内 容 (CS、F3.6、S4、IE8、O 10 )。 

口 <aside>: 定义 次 要 或 相关 性 内 容 (C5、F3.6、S4、IE8、0O 10)。 

口 定义 列表 ( Description lists ): 定义 名 字 与 对 应 值 ， 如 定义 项 与 描述 内 容 (所 有 浏览 器 )。 

口 <meter>: 描述 一 个 数量 邦 围 (C8、F16、S6、0O11)。 

口 <progress>: 通过 设置 进度 条 ， 显 示 实 时 进度 情况 (C8、F6、S6、 IE10、011)。 

口 日 定义 数据 属性 : 通过 data- 柑 式 ， 人 允许 给 元 素 添加 目 定 义 属 性 (所 有 的 浏览 融 都 文 持 通 
过 JavaScript 的 getAttribute() 方 法 该 取 这 些 日 定义 属性 )。 
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语义 标记 全 部 净 是 用 来 描述 内 容 的 。 如 来 你 开发 Web 页 面 有 些 年 涉 了 ， 大 概 郡 异 得 把 页 面 划 
分 为 如 头 部 、 页 脚 以 及 侧 边 栏 等 几 个 区 域 的 好 处 吧 ? 这 样 ， 在 你 应 用 CSS 或 其 他 设置 时 ,就 可 以 
更 便捷 地 识别 出 页 面 区 域 。 


语义 标记 能 够 帮助 机 融和 人 类 更 容 多 地 理解 由 容 的 合 义 及 上 下 文 环境 。 新 的 HIML5S 标 签 ， 
如 <section>、<header> 以 及 <nav>， 都 能 够 帮助 你 达成 这 一 目的 。 


一 个 需要 绪 构 化 标记 的 内 容 场 景 就 是 博客 ， 其 中 会 涉及 头 部 、 页 脚 、 多 种 类 型 的 导航 区 ( 归 
档 、 友 情 链 接 以 及 内 部 链接 等 )， 当 人 然 ,， 还 有 文章 或 帖子 。 先 来 用 HTML5 标 记 对 AwesomeCo (一 
家 很 了 不 起 的 公司 ) 的 博客 首页 做 个 模型 。 


当 所 有 的 工作 完成 ， 我 们 的 成 果 如 图 2-1 所 示 。 


要 找到 如 何 实现 博客 的 思路 ， 就 请 先 来 观察 图 2-2。 我 们 将 创建 一 个 很 典型 的 博客 结构 。 可 
以 看 到 ， 头 部 区 瑾 的 下 方 是 水 平 导 航 区 。 在 主 区 块 里 ， 每 篇 文章 都 有 一 个 头 部 和 一 个 页 脚 。 文 章 
也 可 能 有 一 个 醒目 的 引述 或 劳 日 。 还 有 一 个 侧 边 栏 ， 其 包含 了 附加 的 导航 元 素 。 最 后 ， 页 面 有 一 
个 摆 放 联系 方式 以 及 版 权 信息 的 页 脚 。 这 一 次 ,除了 没 用 上 大 量 的 <div> 标 签 ， 跟 以 往 相 比 并 没 
什么 新 的 东西 ， 接 下 来 将 用 特定 的 标签 描述 这 些 区域 。 
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Posted by Brian on October 1st, 2013 at 2:39PM 





The first big rule in sales is that if the person leaves "Never give someone a 
empty-handed, they're likely not going to come back. chance to say no when 
That's why you have to be somewhat aggressive when selling your product." 
you're working with a customer, but you have to make sure 

you don't overdo it and scare them away. 


One way you can keep a conversation going is to avoid asking questions that have yes or no 
answers. For example, if you're selling a service plan, don't ever ask "Are you interested in our 3 
or 5 year service plan?" Instead, ask "Are you interested in the 3 year service plan or the 5 year 
plan, which is a better value?" At first glance, they appear to be asking the same thing, and while 
a customer can still opt out, it's harder for them to opt out of the second question because they 
have to say more than just "no." 


. $$ 9 $$ 9 9 $9 $$ 9 $$ - 


25 Comments.... 
Copyright © 2013 AwesomeCo. 


Home About Terms of Service Privacy 
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图 2-2” 用 HTML5 语 义 标签 标识 的 博客 结构 
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2.1.1 一 切 缘 始 于 正确 的 文档 类 型 


要 使 用 HTMLS 新 元 素 ， 也 就 意味 着 首先 需要 让 浏览 禹 和 验证 融 理解 我 们 使 用 的 标签 。 创 建 
一 个 新 页 面 index.html， 并 在 其 中 添加 以 下 基本 的 HTML5 模 版 代码 : 








html5_new tags/index.html 
Line1 <!DOCTYPE htmL> 
2 <htmL lang="en-US"> 
3 <head> 


4 <meta charset="utf-8"> 

5 <title>AwesomeCo Blog</title> 
6 </head> 

2 

8 <body> 

9 </body> 

10 </htmL> 





看 一 下 例子 中 第 一 行 的 文档 类 型 。HTMLS 文 档 关 型 只 需 如 此 简单 的 一 行 声明 即 可 。 如 采 你 
以 往 做 过 网 页 开发 ， 应 该 会 对 元 长 且 难 记 的 XHTML 文档 类 型 记忆 犹 新 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 


现在 的 HTML5 文 档 类 型 声明 只 需 一 行 : 
<IDOCTYPE html> 
它 更 简单 ， 也 更 容易 记 住 。 


声明 文档 类 型 的 目的 是 双重 的 。 首 先 ， 当 验证 HTML 代 码 时 ， 它 能 够 帮助 验证 需 决 定 使 用 哪 
种 HTML 验 证 规则 。 其 次 , 文档 类 型 强制 要 求 IE 6、7 和 8 版 本 进入 “标准 模式 ”， 这 在 创建 跨 浏览 
右 支 持 的 页 面 时 极其 重要 。HTML5 文 档 类 型 满足 了 这 两 点 要 求 。 

注意 第 四 行 的 <meta> 标 签 。 其 指定 了 页 面 的 字符 编码 。 如 果 打 算 使 用 Unicode 字 符 ， 就 需要 
采用 如 第 四 行 <meta> 标 签 声明 的 方式 ， 在 前 面部 分 、 所 有 的 文本 内 容 行 之 前 声明 它 。 

基本 的 HTML5 模 版 代码 完成 后 ， 就 可 以 着 手 创 建 博 客 了 。 











2.1.2 ”页 眉 标 签 


与 文档 标题 【heading， 诸 如 <h1> 、<h2> 、<h3> 等 标签 ) 不 同 ， 页 眉 〈header ) 可 以 包含 各 
式 各 样 的 内 容 ， 比 如 公司 商标 、 搜 索 框 ， 等 等 。 我 们 的 博客 页 眉 现 在 只 包含 了 博客 标题 。 





html5_new _tags/index.html 
Line1 <header id="page header"> 
2 <hl>AwesomeCo Blog!</h1> 
3 </header> 
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一 个 页 面 中 并 不 限制 <header> 标 签 的 数量 。 每 个 <section> 标 签 或 <articte> 标 签 , 都 可 以 
包含 目 己 的 <header> 标 签 ， 因此 ， 类 似 第 1 行 那样 的 做 法 ， 以 DD 属性 唯一 识别 标签 是 个 不 错 的 方 
式 。 一 个 唯一 的 ID 也 使 得 给 标签 添加 CSS 样 式 以 及 用 JavaScript 定 位 标签 等 操作 都 变 得 简单 起 来 。 





2.1.3 ”页 脚 标签 


<footer> 标 签 定义 文档 或 相 邻 区 块 的 页 脚 信 息 。 你 见 过 的 页 脚 , 通常 都 包含 了 诸如 版 权 日 期 
以 及 版 权 所 有 等 信息 , 而 在 页 脚 包含 复杂 的 导航 结构 也 是 常见 的 做 法 。 规范 里 指出 可 以 在 文档 中 
包含 多 个 <footer> 标 签 ， 因此， 这 也 意味 着 我 们 可 以 在 博客 文 草 里 包含 <footer> 标 签 。 

现在 ， 来 给 页 面 定 义 一 个 简单 的 页 脚 。 由 于 存在 多 个 页 脚 ， 我 们 会 给 每 个 <footer> 标 签 设 
置 一 个 了 属性 ， 正 如 在 <header> 标 签 里 所 做 的 那样 。 在 打算 为 某 个 <footer> 标 签 及 其 子 元 素 添 
加 样式 时 ，ID 属 性 有 助 于 唯一 识别 该 <footer> 标 签 。 


























html5_new _tags/index.html 

<footer id="page footer"> 
<p>Copyright © 2013 AwesomeCo .</p> 

</footer> 


这 个 <footer> 标 签 只 是 简单 地 包含 了 一 个 版 权 日 期 。 但 是 ， 束 像 页 眉 一 样 ， 页 脚 也 第 第 包 
含 其 他 元 系 ， 其 至 是 导航 元 系 。 











2.1.4 ”导航 标签 

导航 设计 对 于 一 个 成 功 的 网 站 来 说 是 至 天 重要 的 。 如 果 用 户 无 法 快速 找到 它们 所 需 的 内 容 ， 
就 可 能 对 这 个 网 站 兴味 索然 。 因 此 ， 专 门 提供 一 个 导航 标签 是 很 有 音义 的 。 

我 们 在 文档 头 部 添加 一 个 导航 区 块 。 在 里 面 添加 博客 首页 、 归 档 博 客 、 贡 献 者 页 面 以 及 联系 
页 面 的 链接 。 

页 面 可 以 有 多 个 导航 标签 。 通 稍 ， 开 发 者 会 在 头 部 或 页 脚 位 置 添 加 导航 ， 因 此 ， 现 在 就 可 以 
明确 我 们 在 导航 方面 的 考虑 。 在 博客 的 页 脚 区 域 ， 添加 AwesomeCo 公 司 首页 、“ 关 于 我 们 ”页 面 、 
服务 条 款 以 及 隐私 策略 等 页 面 的 链接 ， 并 以 无 序列 表 的 方式 添加 这 些 元 素 到 <footer> 标 签 中 。 























html5_new _tags/index.html 
<footer 1d= page yooter > 
<p>Copyright © 2013 AwesomeCo.</p> 
<hnayv> 
<UL> 
<li><a href="#'">Home</a></11i> 
<li><a href="#'">About</a></1i> 
<li><a href="#">Terms of Service</a></\i> 
<li><a href="#">Privacy</a></1i> 
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</ul> 
</Nayv> 
</footer> 


我 们 将 使 用 CSS 来 改变 这 两 个 导航 条 的 样式 ， 所 以 不 用 担心 它们 的 外 观 。 这 些 新 元 系 的 作用 
只 是 描述 内 容 ， 并 不 摘 述 内 容 长 成 什么 样子 ， 那 是 CSS 所 做 的 事情 。 还 是 继续 关注 标记 本 里 吧 。 


2.1.5 ”区 块 和 文章 


区 块 在 页 面 中 用 于 标识 迎 辑 区 域 。 现 在 ,务必 舍弃 以 往 滥 用 <div> 标 签 来 描述 页 面 逻 辑 区 域 
划分 的 做 法 ， 用 <section> 标 签 来 取代 <div> 标 签 。 





html5_new _tags/index.html 
<section ijid="posts"> 
</section> 


然而 ， 千 万 别 以 为 使 用 了 标签 就 能 一 劳 永 逸 。 一 般 情 况 下 ，<section> 标 签 用 于 对 内 容 进行 
逻辑 分 组 。 我们 创建 了 一 个 <section> 标 签 ， 用 于 标识 所 有 的 博客 文章 。 但 每 篇 文 草 并 不 应 该 都 
用 <section> 标 签 ， 因 为 还 有 个 更 适合 它们 的 标签 。 

标签 

<article> 标 签 非常 适合 用 来 描述 Web 页 面 里 的 实际 内 容 。 页 面 上 有 如 此 多 的 元 素 存在 : 页 
眉 、 页 脚 、 导 航 元 素 、 广 告 条 、 小 部 件 以 及 社交 媒体 分 享 按钮 等 元 素 ， 以 至 于 很 容易 忘记 用 户 访 
问 网 站 的 原因 在 于 对 我 们 所 提供 的 内 容 感 兴趣 。<article> 标 签 就 可 以 用 来 帮助 你 描述 内 容 。 

那么 ，<article> 标 签 与 <section> 标 签 究 范 有 何不 同 呢 ?<section> 标 签 表 示 文 档 中 相关 
内 容 的 逻辑 划分 。 而 <articte> 标 签 代 表 实 际 的 内 容 ， 如 杂志 文章 、 博 客 文章 以 及 新 闻 条 有 目 等 。 
而 且 ， 你 还 可 以 用 <artictLe> 标 签 表 示 一 篇 文章 中 某 些 内 容 的 组 合 ; 这 些 内 容 可 以 独立 存在 。 

把 这 两 个 元 素 搭 配 在 一 起 ，<section> 标 签 就 像 一 份 报纸 中 的 体育 版 块 。 体 育 版 块 有 许多 篇 
文章 ， 每 一 篇 文章 既 能 保持 其 独立 性 ， 又 能 再 次 被 拆 分 成 几 部 分 。 

Web 页 面 某 些 逻辑 区 域 的 划分 ， 如 : 页 眉 、 页 脚 ， 已 经 有 了 合适 的 标签 来 标识 它们 。 而 
<section> 标 签 则 通常 用 于 对 内 容 进 行 逻 辑 分 组 。 

每 篇 博客 文章 都 有 一 个 <header> 标 签 、 具 体内 容 以 及 一 个 <footer> 标 签 。 要 定义 一 篇 完整 
的 文章 ， 如 以 下 代码 所 示 : 




















html5_new _tags/index.html 


<article class="post"> 
<header> 
<h2>How Many Should We Put You Down For?</h2> 
<p>Posted by Brian on 
<time datetime="2013-10-91T7T14:39">0ctober ist, 2013 at 2:39PM</time> 
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</p> 

</header> 

<p> 
The first big rule in sales is that if the person leaves empty-handed, 
they're likely not going to come back. That's why you have to be 
somewhat aggressive when you're working with a customer, but you have 
to make sure you don't overdo it and scare them away. 

</p> 

<p> 
One way you can keep a conversation going is to avold asking gquestions 
that have yes or no answers. For example, if you're selling a service 
plan, don't ever ask &ldquo;Are you interested in our 3 or 5 Year 
service plan?&rdquo; Instead, ask &ldquo;Are YOU interested in the 3 
year service plan or the 5 year plan, which is a better valuyue?&rdquo; 
At first glance, they appear to be asking the same thing, and while 
a customer can still opt out, it's harder for them to opt out of 
the second question because they have to say more than just 
&ldgquo;no.&rdquo; 

</p> 

<footer> 
<p><a href="comments"><1i>25 Comments</i></a> ...</p> 

</footer> 

</article> 


可 以 在 文章 内 部 使 用 <header> 标 签 和 <footer> 标 签 ， 这 样 的 方式 使 得 描述 特定 逻辑 划分 变 
得 更 容易 。 也 可 以 使 用 <section> 标 签 把 文章 拆 分 成 几 部 分 。 








2.1.6 ” 劳 日 与 侧 边 栏 


有 了 时候 ,你 需要 为 主要 内 容 添 加 一 些 额 外 的 辅助 信息 ， 比 如 引文 、 图 表 、 其 他 想法 或 相关 链 
接 等 。 可 以 使 用 新 的 <aside> 标 签 来 标识 这 些 元 对 。 





html5_new _tags/index.html 


<aside> 
<p> 
ALdquo ;Never give someone a chance to Say no when 
selling your product.Ardquo ; 
</p> 
</aside> 


上 述 代码 在 <aside> 元 素 里 放置 了 一 对 标注 引号 。<aside> 标 签 敬 套 在 <article> 标 签 中 ， 
使 其 接近 相关 内 容 。 
完成 后 的 区 块 连同 劳 白 如 下 所 示 。 


html5_new _tags/index.html 


<section id="posts"> 
<article class="post"> 
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<header> 
<h2>How Many Should We Put You Down For?</h2> 
<p>Posted by Brian on 
<time datetime="2013-710-01T14:39">0ctober 1st, 2013 at 2:39PM</time> 
</p> 
</header> 
<aside> 
<hb> 
ALdquo ;Never give someone a chance to Say no when 
selling your progduct .Ardquo ， 
</p> 
</aside> 
<p> 
The first big rule in sales is that if the person leaves empty-handed, 
they're likely not going to come back. That's why you have to be 
somewhat aggressive when you're working with a customer, but you have 
to make sure you don't overdo it and scare them away. 
</p> 
<P> 
One way you can keep a conversation going is to avold asking gquestions 
that have yes or no answers. For example, if you' re selling a service 
plan, don't ever ask &ldquo;Are you interested in Our 3 or 5 year 
service plan?&rdquo; Instead, ask &ldquo;Are you interested ln the 3 
year service plan or the 5 year plan, which is a better value?&rdquo; 
At first glance, they appear to be asking the same thing, and while 
a customer can still opt out, it's harder for them to opt out of 
the second question because they have to say more than just 
&ldquo;no.&rdquo; 
</p> 
<footer> 
<p><a href="comments"><1i>25 Comments</i></a> ...</p> 
</footer> 
</article> 
</section> 


现在 准备 添加 侧 边栏 区 块 。 


博客 的 右边 有 一 个 侧 边 栏 ， 其 中 包含 了 博客 的 归档 链接 。 如 果 你 认为 可 以 使 用 <aside> 标 签 
定义 博客 的 侧 边 栏 , 那么 请 再 仔细 考虑 一 下 。 你 可 以 这 么 做 , 但 这 却 违 背 了 规范 的 定义 。<aside> 
标签 用 于 展示 文章 相关 的 附加 内 容 ， 它 是 放置 有 关 链 接 、 术 语 表 或 者 引文 的 最 佳 场所 。 


为 了 标记 出 包含 归档 列表 的 侧 边 柱 ， 我 们 需要 一 个 <section> 标 签 以 及 一 个 <nav> 标 签 。 


























html5_new _tags/index.html 


<Ssection id="sidebar'"> 


<nav> 
<h3>Archives</h3> 


第 2 草 


<UL> 


<li><a 
<li><a 
<li><a 
<l1i><a 
<l1i><a 
<l1i><a 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
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href="2013/10">0ctober 2013</a></11i> 
href="2013/09">September 2013</a></1i> 
href="2013/08">August 2013</a></\i> 
href="20173/07">jJuly 2013</a></1i> 
href="2013/86">June 2013</a></li> 
href="2013/05">May 2013</a></11i> 
href="2013/04">April 2013</a></11i> 
href="2013/03">March 2013</a></\1i> 
href="2013/02">February 2013</a></1i> 
href="2013/01">January 2013</a></1i> 
href="all">More</a></\1> 


</ul> 
</7 nav> 


</section> 


这 段 代码 里 , 侧 边 芒 中 的 链接 是 个 
这 里 专门 为 导航 区 预 留 这 些 元 素 。 


以 上 就 是 博客 的 结构 。 接 下 来 把 视线 园 到 布局 上 来 。 





二 级 导 币 。 并 非 每 一 个 链接 组 都 需要 用 <nav> 标 签 包 起 来 ; 





2.1.7 为 博客 设置 样式 


就 如 以 前 为 <div> 标 签 设 置 样式 一 样 ， 我 们 来 为 这 些 新 元 素 设置 样式 。 首 先 ， 创 建新 的 样式 
表 文 件 stylesheets/style.css， 在 <header> 标 签 里 设置 该 样式 表 链 接 ， 以 便 给 页 面 添 加 该 样式 表 文 
件 。 代 码 如 下 所 示 : 














html5_new _tags/index.html 


<link rel="stylesheet" href="stylesheets/style.css'"> 


设置 页 面 内 容 居 中 显示 ， 并 设置 基本 字体 样式 。 





html5_new _ tags/stylesheets/style.css 


body{ 
margin: l5px auto; 
font-family: Arial, 
width: 960px ; 

} 


"MS Trebuchet", sanNns-serif: 
p{ margin: ©0 © 20px 0;} 


p, li{ line-height: 20px; } 
接 下 来 设置 <header> 标 签 宽度 。 
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html5_new _tags/stylesheets/style.css 

#page headert{ width: 100%; } 

设置 主要 导航 区 链接 的 样式 。 通 过 浮动 各 列表 项 ,证 各 项 落 在 一 条 水 平 线 上 ， 转 换 项 目 列表 
为 水 平 导航 条 : 





html5_new _tags/stylesheets/style.css 

#page header > nav > ul, #page footer > nav > ULL 
list-style: none; 
margin: 0; 
padding: 0; 

} 


#page header > nav > ul > li, #page footer nav > UL > 1it{ 
margin: © 20px 0 0; 
padding: 90; 
display: inline; 


} 

我 们 为 每 个 <Li> 标 签 设 置 了 右 外 边 距 , 以 便 在 羔 单 项 之 间 插 入 水 平 间 距 。 这 里 使 用 了 外 边 距 
(margin ) 设置 的 简写 规则 ， 依 次 为 : 顶端 (top )、 右 边 (right )、 底 部 (bottom ) 以 及 左边 
(Left )。 把 这 个 顺序 想象 成 一 个 模拟 时 钟 : 12 点 在 顶部 、3 点 在 右边 、6 点 在 底部 、9% 点 在 左边 。 

接 下 来 ,， 对 主要 内 容 部 分 设置 样式 ， 以 创建 一 个 很 大 的 内 容 栏 以 及 一 个 较 小 的 侧 边 栏 。 文 曹 
所 属 的 区 段 (<section> 标 签 ) 需要 浮动 到 左边 并 为 其 设置 好 宽度 ， 还 需要 浮动 文章 内 部 的 标注 
引号 。 同 时 ， 增 大 标注 引号 的 字号。 

















html5_new _tags/stylesheets/style.css 

#pOsSts{ 
float: left, 
widith: 74%; 

} 

#posts asidef 
float: right; 
font-size: 20px; 
line-height: 40px; 
margin-left: 5S%; 
width: 35%; 

} 


之 后 ， 浮 动 侧 边 栏 (<sidebar> 标 签 ) 并 设置 其 宽度 . 


html5_new _tags/stylesheets/style.css 
#5sidebart{ 

float: left; 

width: 25%; 
} 
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最 后 ， 清 除 页 脚 ( <footer> 标 签 ) 的 浮动 ， 以 便 其 落 在 页 面 底部 。 记 住 无 论 何 时 浮动 了 元 
系 ， 该 元 系 就 会 被 清除 出 普通 的 文档 流 。 清 除 元 系 的 浮动 ， 即 通知 浏 览 硕 不 要 浮动 该 元 双 了 。 





html5_new _ tags/stylesheets/style.css 
#page footert 

clear: both,; 

display: block; 

text-align: Center ; 

width: 100%, 
} 


以 上 就 是 基本 的 样式 设置 ， 通 过 这 些 样 式 的 应 用 ， 博 客 肯 定 会 变 得 好 看 多 了 。 











2.1.8 回 退 方案 


虽然 上 面 的 代码 在 IE 9、Firefox、Chinese、Opera 以 及 Safari 等 浏览 器 中 都 能 工作 得 很 好 ,但 
如 果 那 些 使 用 IE 8 的 用 户 在 浏览 页 面 时 发 现 情况 一 团 糟 ， 估 计 他 们 不 会 太 愉快 。 内 容 显 示 没 有 问 
题 ， 但 由 于 IE 8 不 理解 HTML5 引 进 的 新 元 素 ,， 所 以 无 法 为 它们 应 用 样式 ， 页 面 效 果 看 起 来 就 像 二 
十 世纪 九 十 年 代 中 期 制作 的 页 面 一 样 。 


要 让 IE 8 及 更 早 的 浏览 磊 也 能 为 这 些 新 元 取 应 用 样式 的 唯一 办 法 就 是 使 用 JavaScript 定 义 这 
些 新 元 系 ,， 并 作为 文档 的 一 部 分 。 其 实 这 也 非常 容易 。 在 页 面 的 标签 里 添加 JavaScript 代 三 ， 并 在 
浏览 顶 演 梁 元素 之 前 执行 这 些 代 码 。 我 们 把 这 些 代 码 放 在 一 个 条 件 注释 里 一 一 一 种 只 有 了 下 浏览 必 
才能 够 识别 的 特定 注释 类 型 。 


























html5_new _tags/index.html 

<!--[if lte IE 8]> 

<script> 
document,. createE lement{"nav"),; 
document .createE Lement {"header" ) ; 
document,.createElement{"footer"}); 
document.createElement("section"); 
document ,CreateELement( "aszioe" ) ; 
document.createElement("articile"); 

</script> 

<!l[endif]--> 


这 个 特有 的 注释 针对 所 有 版 本 低 于 9.0 的 正 浏 览 锅 。 这 时 如 果 在 下 8 里 重新 加 载 页 面 ， 显示 就 
变 正 常 了 。 不 过 ， 这 种 方式 创建 了 一 个 依赖 JavaScript 的 解决 方案 ， 你 应 该 考虑 到 这 一 点 。 文 档 
的 组 织 及 可 读 性 的 提升 使 得 这 种 方案 值得 一 试 , 刀 外 ,因为 内 容 仍 会 显 不 并 可 为 屏 项 阅读 右 读 取 ， 
这 种 方案 也 就 没有 可 访问 性 方面 的 担忧 。 这 个 方案 的 唯一 问题 就 是 针对 那些 刻意 禁用 JavaScript 
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的 用 户 来 说 ， 页 面 看 起 来 过 时 已 久 。 

对 于 只 为 少量 元 素 次 加 文 持 或 理解 如 何 添 加 文 持 的 情况 来 说 , 这 种 方式 不 失 为 一 个 个 合适 的 
解决 方案 。 如 采 你 想 为 更 多 的 元 系 提 供 文 持 ，Remy Sharp 开 发 的 出 色 的 html5shiv JavaScript 代 码 
文件 则 是 更 完备 、 也 更 适合 回 退 支持 的 方案 。” 








2.2 实例 2: 用 <meter> 元 素 实 现 进 度 条 


AwesomeCo 公 司 这 几 个 月 正在 举办 一 个 慈善 捐赠 活动 , 硕 望 能 够 从 社会 筋 捐 到 5$000 美 元 。 这 
是 一 家 令 人 尊敬 的 公司 ,如果 人 们 确保 能 够 给 予 足够 的 文 持 以 达到 既定 $000 美 元 的 目标 , 它 就 决 
定额 外 再 捐赠 S000 美 元 。AwesomeCo 公 司 和 希望 在 网 站 某 个 页 面 中 显示 一 个 捐赠 进度 条 。 当 我 们 完 
成 进度 条 功能 ， 页 面 效 果 如 图 2-3 所 示 。 

















Our Fundraising Goal 





Help us reach our goal of $5000! 








图 2-3 ”显示 募捐 进展 的 进度 条 

虽然 可 以 用 <div> 标 签 加 上 一 些 CSS 样 式 来 实现 进度 条 ， 但 现在 可 以 使 用 HTML5 中 新 的 
<meter> 标 签 达 成 同样 的 目标 ，<meter> 标 签 就 是 为 进度 控制 而 专门 设计 的 。 

<meter> 标 签 在 语义 上 描述 一 个 实际 的 数值 计量 。 为 了 与 规范 要 求 达 成 一 致 ，<meter> 标 签 
不 应 该 用 于 没有 固定 最 小 或 最 大 值 的 场景 ， 比 如 身高 和 体重 。 但 是 ， 你 可 以 在 温度 计量 中 使 用 
<meter> 标 签 ， 只 要 类 似 体温 计 那 样 ， 设 置 有 最 低 值 和 最 高 值 即 可 。 

在 这 个 例子 中 , 我 们 希望 显示 离 5000 美 元 的 日 标 还 有 多 少 差距 。 这 种 场景 需 设置 最 小 值 和 最 
大 值 ， 因 此 ，<meter> 标 签 非常 符合 我 们 的 要 求 。 

我 们 通过 创建 一 个 新 的 HTML5 文 档 来 快速 实现 一 个 原型 。 同 时 ， 编 写 以 下 代码 实现 数值 计 
量 元 系 , 在 这 里 , 为 了 便于 描述 该 元 系 现 在 是 如 何 运 作 的 , 便 编 公 劳 捐 到 的 当前 金额 为 2500 美 元 。 
































html5_ meter/index.html 

<h3>0ur Fundraising Goal</h3> 

<meter title="USD" id="pledge goal" 
value="2500.00" min="0" max="5000.00"> 

</meter> 

<p>Help us reach our goal of $50001</p> 
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可 以 通过 CSS 来 控制 元 素 的 宽度 ， 创 建新 的 CSS 文 件 stylesheets/style.css， 并 添加 以 下 代码 . 


html5_meter/stylesheets/style.css 


metert 
width: 280px; 
} 


别 忘记 在 HTML 页 面 的 区 域 添加 CSS 文 件 的 链接 





html5 meter/index.html 

<link rel="stylesheet" href="stylesheets/style.css'"> 

打开 浏览 希 ， 可 以 看 到 一 个 非常 精巧 的 <meter> 标 签 。 但 并 非 所 有 浏览 硕 都 文 持 <meter> 标 
签 ， 因 此 ， 还 得 考虑 合适 的 回 退 方 案 。 


2.2.1 回 退 方案 


并 不 是 所 有 浏览 此 都 支持 <meter> 标 签 。 但 我 们 可 以 使 用 jQuery 以 及 <meter> 标 签 里 的 信息 
来 构造 我 们 自己 的 <meter> 标 签 , 以 得 到 所 有 浏览 融 的 文 持 。 为 此 , 创建 一 个 javascripts/fallback.js 
新 文件 ， 里 面 存 放 JavaScript 逻 辑 处 理 代 码 。 同 时 ， 在 页 面 底部 加 载 jQuery 以 及 这 个 新 文件 。 

第 一 步 ， 检 测 浏 览 器 是 否 文 持 <meter> 标 签 ， 创 建 一 个 <meter> 标 签 并 检测 其 max 属 性 ， 判 
定 能 否 检测 出 该 属性 。 如 有 果 检 测 不 出 ， 则 说 明 浏 览 硕 不 文 持 <meter> 标 签 。 声 明 一 个 名 为 
noMeterSupport0 的 函数 处 理 这 件 事 : 








html5_meter/javascripts/fallback.js 


Var noMeterSupport = function(){ 
return(document.createElement('meter').max === undefined): 
} 


之 后 ， 如 果 浏 览 磊 不 支持 <meter> 标 签 ， 则 使 用 jQuery 获取 <meter> 标 签 的 值 ， 并 构造 一 个 
我 们 目 己 的 <meter> 标 签 。 

所 构造 的 <meter> 标 签 将 由 以 下 部 分 组 成 : 一 个 表示 计量 总 长 度 的 外 框 〈 称 为 fakeMeter )， 
我 们 称 为 一 个 内 框 〈 称 为 fiLL )， 以 及 一 个 用 来 呈现 美元 总 人 额 文 本 标签 。 同 样 ， 后 续 也 将 为 这 些 
元 了 添加 样式 。 一 旦 准备 好 了 这 些 新 元 孙 就 用 我 们 目 己 构造 的 元 系 蔡 代 <meter> 标 签 。 











html5_meter/javascripts/fallback.js 


Line1 If (noMeterSupport()) { 
- Var fakeMeter, fill, label, labelText, max, meter, value; 
meter = $("#pledge goal"); 
value = meter.attr("value"); 
5 max = meter.attr("max"); 
labelText = "$" + meter.val(); 


2.2 实例 2， 用 <meter 过 元素 实现 进度 条 23 


fakeMeter = $("<div></div>"); 
fakeMeter .addCLass( "meter”) ; 

10 label = $("<span>" + labelText + "</span>"); 
label.addClass("Llabel"); 


fill = $("<div></div>"); 
- fill.addClass("fill"); 
15 fill.css("width", (value / max * 100) + "%"); 
; fill.append("<div style='clear:both;'><br></div>"); 
fakeMeter.append (fil1);, 
fakeMeter .append(LabeL ) ; 
meter.replaceWith (fakeMeter); 
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如 果 这 段 代码 让 你 感到 困惑 ， 请 参考 附录 B， 快 速 浏览 jQuery 的 基本 知识 。 
完成 了 JavaScript 代 码 ， 接 下 来 设置 所 构造 的 <meter> 标 签 的 样式 。 


html5_meter/stylesheets/style.css 


.metert{ 
border: lpx solid #000, 
display: block; 
position: relative, 
width: 280px; 

} 


我 们 设置 了 border 和 width,， 并 设置 position 为 reLative， 以 便 定 位 该 元 素 ( 即 fakeMeter 外 框 ) 
内 部 的 文本 标签 。 接 下 来 ,定义 包 内 框 的 效果 为 渐变 填充 ( gradient fill )， 如 下 所 示 : 


html5_meter/stylesheets/style.css 
.fill{ 
background-color: #693; 
background-image: -webkit-gradient'( 
linear, 
left bottom, 
left top, 
color-stop(0.37, rgb(14,242,30)), 
color-stop(0.69, rgb(41,255,57)) 
人 


background-image: -moz-L 
center bottom, 
rgb(14,242,30) 3755， 


rgb(41,255,57) 69% 


inear-gradient( 


) ， 
} 
渐变 语法 有 些许 复杂 ， 我 们 会 在 第 8 章 详 细 讨 论 它 。 一 旦 设置 了 fl 内 框 的 样式 ， 接 下 来 就 需 
要 在 进度 条 里 放置 表示 美元 总 额 的 文本 标签 。 
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html5_meter/stylesheets/style.css 
.Labelf{ 
position: absoLute ; 
right: 60; 
top: 0 
z-index: 1000; 
} 


在 进度 条 里 绝对 定位 文本 标签 。 这 个 文本 标签 位 于 fi 内 框 的 上 层 。 完 成 后 ,所 构造 的 <meter> 
标签 如 图 2-4 所 示 。 





Our Fundraising Goal 


$2500.00 


Help us reach our goal of $5000! 





图 2-4 我们 目 己 构造 的 <meter> 标 签 


茶 用 JavaScript 的 用 户 仍 能 看 到 <meter> 元 素 开 、 闭 标签 之 间 的 内 容 , 也 就 是 说 我 们 要 留心 在 
开 、 闭 标签 之 间 应 该 放 些 什 么 内 容 。 





2.2.2 ”进度 条 标签 


如 有 果 想 在 Web 应 用 程序 中 实现 一 个 上 传 文件 进度 条 ， 你 就 应 该 研究 一 下 HIML5 引 入 的 
<progress> 标 签 。 

<progress> 标 签 类 似 于 <meter> 标 签 , 但 它 用 来 呈现 动态 进度 , 正如 你 在 上 传 文件 时 看 到 的 
那样 〈 并非 静态 的 度量 ， 更 像 是 针对 给 定 用 户 ,， 其 上 传 文件 时 在 服务 右 问 的 当前 有 效 存储 进度 )。 
总 体 而 言 ，<progress> 标 签 和 <meter> 标 签 还 是 非常 相似 的 。 























html5_meter/progress.html 

<progress 1d="progressbar ”min=' 0， max="100" valuyue="0"></progress> 

如 同 <meter> 标 签 ，<prog ress> 标 签 也 无 法 得 到 所 有 浏览 夫 的 文 持 。 为 了 证 所 有 浏览 需 都 
文 持 ， 同 样 需 要 通过 JavaScript 获 取 <progress> 标 签 的 值 ， 并 构建 自己 的 可 视 化 样式 。 你 也 可 以 
使 用 Lea Verou 开 发 的 HTMLS5 polyfill。"” 





GD http://lea.verou.me/polyfills/progress/ 
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2.3 实例 3: 用 目 定 义 数据 属性 构造 弹出 窗 体 


如 果 你 开发 过 使 用 JavaScript 获 取 文 档 信 息 的 Web 应 用 程序 , 你 就 知道 有 时 候 需 要 用 点 小 技巧 
及 解析 方式 来 完成 这 项 工作 。 回 事件 处 理 程序 传人 附加 信息 或 滥用 reL、ctLass 属 性 以 注入 行为 
等 手段 ， 现 在 可 以 完全 抛弃 了 ! 这 一 切 都 应 该 归功 于 HTMLS 新 引入 的 目 定 义 数据 属性 。 


目 定 义 数 据 属 性 全 部 以 data- 前 缀 打头 , 并 为 HTMLS 文 档 的 验证 锅 所 忽略 。 可 以 为 任何 需要 
的 元 系 附 加 上 目 定 义 数 据 属性 ,无 论 它 是 图 片 的 元 数据 、 经 纬度 坐标 ， 还 是 本 下 将 要 介绍 的 弹出 
窗 体 尺寸 。 最 重要 的 是 ， 由 于 JavaScript 能 够 轻松 获取 自 定 义 数据 属性 ， 因此, 你 几乎 可 以 在 每 一 
个 训 览 融 中 痢 使 用 目 定 义 数 据 属性 。 











2.3.1 行为 与 内 容 分 离 ， 以 及 oncLick() 的 问题 


多 年 以 来 ， 弹 出 窗 体 一 直 背 负 痢 一 个 坏 名 声 ， 这 是 必然 的 。 它 们 和 篆 弹出 一 个 广告 ,迷惑 坚 
无 戒心 的 浏览 用 户 安装 间谍 软件 或 病毒 ， 更 糟糕 的 是 , 泄露 个 人 隐私 信息 并 被 转 售 。 难 怪 大 多 数 
的 浏览 用 户 选 择 屏 珊 弹 出 窗 体 。 然 而 ,弹出 窗 体 并 非 总 是 坏事 。Web 应 用 开发 者 经 党 依 徘 弹 出 窗 
体 显 示 在 线 帮助 、 附 件 选 项 或 其 他 重要 的 用 户 界面 特性 。 为 了 减少 弹出 窗 体 的 干扰 ， 我们 需要 采 
取 低 调 的 方式 实现 它们 。 观察 一 下 AwesomeCo 公 司 的 人 力 资源 页 面 , 你 会 看 到 用 来 打开 弹出 窗 体 
以 显示 策略 的 几 个 链接 。 大 多 数 实 现代 码 都 类 似 这 样 的 形式 : 

















htmlS5_popups with custom_ data/original example_1.html 

<a href='#"' 
onclick="wingdow.open{'help/holiday pay.html',WinName, 'width=300, height=300');"> 
Holiday pay 

</a> 


这 是 创建 打开 弹出 窗 体 链 接 时 相当 常用 的 一 种 方式 。 实 际 上 ， 这 是 JavaScript 开 发 新 手 在 创 
建 弹出 窗 体 时 ,通常 需 要 掌握 的 。 在 继续 学 习 之 前 ， 我 们 先 来 解决 这 种 方式 所 引发 的 几 个 问题 。 





2.3.2 ”增强 可 访问 性 


首先 需要 关注 的 问题 是 ， 指 定 目 标 UREL 的 href 属 性 并 未 设置 ! 如 果 浏 览 絮 禁用 JavaScript， 那 
么 上 述 方式 就 会 造成 JavaScript 代 人 码 中 的 链接 无 法 转 回 到 目标 页 面 。 这 个 大 问题 需要 马上 解决 。 记 
住 ， 在 任何 情况 下 都 不 要 省 略 href 属 性 ， 也 不 要 如 上 述 方式 那样 设 定 href 属 性 值 。 应 该 把 通常 
弹出 页 面 用 的 链接 地 址 赋 给 href 属 性 。 




















htmlS5_popups with custom_ data/original example 2.html 

<a href='help/holiday pay.htmi 
onclick="window, open(this.href,WinName, 'width=300, height=300');"> 
Holiday pay 

</a> 
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上 述 代 码 设 置 了 href 属 性, 接 下 来 JavaScript 代码 可 以 该 取 <a> 元 素 的 href 属 性 ,并 设置 目 
标 链接 。 


要 创建 可 访问 性 恨 好 的 页 面 ， 首 先 要 确保 所 有 的 功能 在 禁用 JavaScript 的 情况 下 也 能 恨 好 运 
作 。 在 此 基础 上 再 写 JavaScript 交 互 代 码 就 会 更 加 容易 。 


2.3.3 不用 onclick() 


确保 行为 与 内 容 分 离 ， 就 像 确 保 描述 内 容 与 样式 设置 分 离 那样 。 一 开始 使 用 oncLick() 很 容 
多 ,但 假设 一 个 页 面 里 有 50 个 链接 ，onclick() 方 法 就 会 失控 。 首 和 完 ， 你 不 得 不 一 过 又 一 过 地 重 
复 相似 的 JavaScript 代 码 。 

如 果 采 用 服务 需 端 代码 生成 JavaScript 代 码 的 方式 , 就 可 能 导致 HTML 文 件 体积 比 所 需要 的 要 
大 得 多 。 


一 个 蔡 代 方案 是 ， 我 们 可 以 给 页 面 中 的 每 个 销 点 分 配 一 个 class 属 性 ， 以 标识 这 是 一 个 链接 。 











html5 popups with custom_ data/original example 3.html 


<a href="heip/holiday pay.htmil" class="popup">Holiday Pay</a> 


为 了 在 各 个 浏览 硕 中 都 能 够 顺利 地 执行 事件 处 理 代码 ， 这 里 将 借助 jQuery。 在 页 面 底 部 、 
</body> 闭 标签 之 前 ， 添 加 ]Query 库 的 引用 。 


htmlSs_popups with custom data/original example 3.html 
<script 

src='http://ajax.googleapis.com/aijax/ libs/ijgquery/1.9.1/ijquery.min.s'> 
</script> 


在 上 述 代码 的 下 面 ， 添 加 一 个 新 的 <script> 标 签 ， 并 在 其 中 输入 以 下 代码 : 





html5 popups with custom data/original example 3.html 
${"a.popup").click(function(event)t{ 

event .preventDefauLt( ) ; 

window.open(this ,getAttribute( hrer ) ) 

上 
上 上 述 代码 使 用 了 一 个 jQuery 选择 器 获取 所 有 class 属 性 为 popup 的 元 素 ， 然 后 给 每 个 元 素 的 点 
击 事件 添加 一 个 监听 器 。 


一 旦 点 击 了 链接 ， 将 执行 传人 cLick() 的 晒 数 。preventDefautLt 方 法 阻止 默认 的 点 击 事件 
行为 。 在 这 里 ， 将 阻止 浏览 融 啊 应 链接 点 击 事 件 并 显示 一 个 新 页 面 。 

然而 ， 目 前 尚未 涉及 如 何 设置 窗 体 尺 寸 及 人 位置。 我们 和 希望 即使 是 不 大 熟悉 JavaScript 开 发 的 
Web 设 计 者 也 能 够 基于 每 个 链接 设置 窗 体 尺寸 。 





2.3 实例 3: 用 自 定义 数据 属性 构造 弹出 窗 体 27 


2.3.4 引入 自 定义 数据 属性 


创建 JavaScript 交 互 应 用时, 通常 都 要 考虑 到 是 和 否 能 给 Web 设 计 者 市 来 便利 , 这 种 情况 很 常见 。 
如 前 文 所 述 1 方 )， dd 但 是 onclick() 的 方式 存在 
太 多 浆 端 。 不 过 ， 我 们 可 以 在 元 系 中 般 入 这 些 属 性 。 要 做 的 怠 是 构造 下 述 代码 所 示 的 <a> 标 签 。 











html5_ popups_with_custom_data/popup.htmil 
<a href=' helLp/hotIaay pay.htmt" 
data-width="600 
data-height="400" 
title="Holiday Pay" 
class="popup">Holiday pay</a> 


现在 来 修改 前 面 写 的 click() 事 件 ， 以 获取 <a> 标 签 的 目 定义 数据 属性 并 把 它们 传 入 
window.open() 方 法 中 。 


html5_ popups with custom data/popup.htm 
$("a.Ppopup"}.click{(function(event)t 
event.preventDefault{),; 
var link = this; 
var href = link.getAttribute("href"); 
Var height = link.getAttribute("data-height"),; 
Var width = link.getAttribute("dgata-width"),; 


window.open (href,"popup", 
"height=" + height +",width=" + width + ""); 
了 及 


我 们 中 规 中 和 矩 地 通过 jQuery 人 处理 click() 事 件 。 在 click() 事 件 处 理光 数 中 ， 用 关键 字 this 
表示 我 们 点 击 的 元 素 ( 即 <a> 标 签 )。 通 过 getAttribute() 方 法 ， 可 以 从 该 元 素 中 获取 用 于 弹出 
窗 体 的 属性 值 。 


任务 完成 了 ! 现在 点 击 链接 ， 将 会 在 新 窗 体 中 打开 它 。 





2.3.5 回 退 方案 


只 要 老式 浏览 旬 文 持 JavaScript， 上 面 的 这 些 目 定义 数据 属性 就 能 在 这 些 浏 览 句 中 很 好 地 运 
作 。 四 定义 数据 属性 并 不 会 跟 浏 览 磊 产生 冲突 ， 文 档 也 依然 有 效 晶 不 会 出 错 。 但 由 于 声明 了 
HTMLS 文 档 类 型 ， 以 data- 打 头 的 属性 就 会 被 老式 浏览 锅 全 部 忽略 。 


我 们 可 以 用 别 的 方式 访问 自 定义 数据 属性 ， 比 如 dataset 对 象 。 它 用 于 转换 自 定义 数据 属性 
( attribute， 系 标签 属性 ) 为 DOM 对 象 属性 ( property )， 访 问 方式 如 下 。 

















htmlS5_popups with custom data/popup_dataset.html 


var height = link.dataset.height, 
var width = link.dataset .width; 
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这 种 方式 很 方便 ， 但 有 几 个 问题 需要 注意 。 首 要 地 ， 它 无 法 在 了 正 10 及 之 前 的 版 本 上 获得 文 
持 ， 因 此 还 适合 作为 通用 的 解决 方案 。 其 次 ， 如 果 存 在 一 个 如 data-mobile-image-size 这 样 的 
自 定义 数据 类 型 , 就 不 得 不 用 dataset .mobileImageSize 这 样 的 形式 来 访问 它 ,。 对 应 到 dataset 
对 象 上 的 属性 需 转 换 为 骆 弦 拼写 法 。 











提醒 ”这 个 例子 使 用 了 自 定义 数据 属性 来 为 客户 端 脚本 提供 附加 信息 。 这 是 一 种 解决 特定 问题 的 
灵活 做 法 ， 并 介绍 了 一 种 使 用 自 定义 数据 属性 的 方式 。 哩 然 这 种 方式 混用 了 描述 内 容 与 标 
记 ， 却 通过 简单 例子 告诉 我 们 ,使 用 JavaScript 米 读 取 髋 入 在 页 面 中 的 属性 值 是 多 和 勾 容 萄 。 


2.4 实例 4: 营 见 问题 手 述 列表 


如 采 说 有 什么 功能 是 内 容 驱 动 网 站 不 可 或 缺 的 ， 十 之 八 九 就 是 FAQ ( frequently asked 
questions， 负 见 问 题 )。 好 的 网 站 会 把 用 户 真正 提 到 的 问题 加 到 FAQ 中 ; 也 有 一 些 网 站 “ 酒 年 充 
数 ”， 在 FAQ 中 回答 一 些 网 站 主体 部 分 已 经 覆盖 的 内 容 。 但 不 管 FAQ 内 容 是 怎样 的 ， 要 想 出 恰当 
的 标记 来 实现 它们 一 直 是 一 件 环 手 的 事情 。 

过 去 ，Web 开 发 者 想 尽 各 种 办 法 来 实现 一 个 FAQ， 包 括 使 用 有 序列 表 、 使 用 带 class 属 性 的 
<div> 标 签 以 及 设置 一 堆 样 式 等 ， 但 这 些 方式 从 语义 角度 来 看 都 不 合适 。 我 们 和 希望 能 够 做 到 一 个 
问题 链接 到 一 个 对 应 的 答案 ， 现 在 ， 通 过 使 用 符合 语义 的 <dL> 元 兹 ， 可 以 很 容易 地 实现 它 。 

在 旧版 本 的 HITML 中 ，<dL> 元 素 被 称 为 定义 列表 ， 用 于 定义 术语 。 但 在 HTML5S 中 ，<dL> 元 
率 变 成 了 一 个 描述 性 列表 。 虽 然 实 现代 人 码 几 乎 未 变 , 但 规范 的 变化 使 得 该 元 素 更 清晰 ,在 该 元 素 
的 使 用 上 ， 灵 活性 也 大 大 增加 。 

这 非常 棒 ! AwesomeCo 公 司 正 需要 一 个 介绍 该 公司 业务 的 FAQ。 在 接 下 来 的 例子 中 , 我 们 将 
使 用 一 些 虚 构 的 内 容 ， 来 演示 如 何 实现 一 个 FAQ。 






































FAQ 内 容 结构 


这 个 FAQ 示 例 的 内 容 结构 很 规 单 。 通 过 <dL> 标 签 定 义 FAQ 本 号 ， 用 <dt> 标 签 定 义 每 个 问题 ， 
在 <dd> 标 签 中 放置 对 应 每 个 问题 的 答案 。 





html5_descriptionlist faq/index.html 


<article> 
<hl>AwesomeCo FAQ</h1> 
<dl> 
<dt>Wwhat is it that AwesomeCo actually does?</dt> 
<0dd> 
<p> 


AwesomeCo creates innovative solutions for business that 
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Leverage growth and promote synergy, resulting in a better 
life for the global community. 
</p> 
</dd> 
</dl> 
</article> 
默认 的 样式 在 大 多 数 浏 贤 各 中 部 能 很 好 地 执行 ， 如 图 2-5 所 示 ， 每 个 党 宁都 在 对 应 的 问题 下 
面 缩 进 排列 。 


AwesomeCo FAQ 


Whatis it that AwesomeCo actually does? 


AwesomeCo creates innovative solutions for business that leverage growth and promote synerey, resulting in a better life for the global community. 
图 2-5 默认 样式 的 FAQ 
通过 这 些 元 素 的 使 用 , 我 们 就 可 以 绕 过 添加 class 属 性 的 方式 , 来 给 这 些 元 素 应 用 样式 。 如 果 考 虑 
在 智能 手机 上 浏览 页 面 ， 还 可 以 通过 JavaScript 很 容易 地 实现 条 目 合 并 ， 以 减 小 页 面体 积 并 节省 流量 。 
每 个 浏览 硕 都 文 持 <dL> 标 签 ， 在 HIMLS 中 唯一 变化 的 就 是 应 该 如 何在 内 容 中 应 用 它 。 在 这 
里 ， 不 需要 回 退 方案 。 


2.5 ”未 来 展望 


可 以 用 新 标签 和 新 属性 做 很 多 有 趣 的 事情 。 比 如 , 我 们 可 以 在 打印 样式 表 中 轻松 识别 并 禁用 
导航 及 文章 的 页 脚 : 


nav, article>footer{display:none} 

我 们 还 能 通过 JavaScript 快 速 识别 出 页 面 或 网 站 的 所 有 文 草 ,但 最 重要 的 是 , 现在 可 以 用 合适 
的 标签 标识 内 容 , 为 编写 更 好 的 样式 代码 及 JavaScript 代 码 创造 条 件 。 看 一 下 规范 说 明 , 你 就 会 发 
现 还 有 几 个 元 素 是 浏览 硕 后 续 要 实现 文 持 的 ， 包 括 对 话 框 元 素 (<diaLog> )、 文 本 高 亮 元 系 
( <mark> )， 等 等 。 

目 定 义 数 据 属性 为 开发 者 提供 了 在 标记 中 航 入 各 种 数据 的 灵活 上 度 。 实 际 上 ， 我 们 将 会 在 第 6 
草 青 次 用 到 它 。 

可 以 结合 使 用 自 定义 数据 属性 和 JavaScript， 通 过 简单 地 定位 data-remote 属 性 为 true 的 
(data- remote=true ) 某 些 表单 标签 ， 来 判定 表单 标签 是 否 应 以 Ajax 方 式 提 交 。 还 可 以 在 页 面 仍 
处 于 缓存 状态 下 时 ， 通 过 目 定 义 数 据 属 性 呈现 基于 用 户 时 区 的 日 期 和 时 间 ; 只 需 把 日 期 作为 UTC 
( Coordinated Universal Time， 协 调 世 界 时 ， 又 称 世 界 统一 时 间 ) 放 进 HTML 页 面 ,然后 在 客户 问 转 
换 为 用 户 本 地 时 间 即 可 。 目 定义 数据 属性 允许 你 通信 真实 而 有 用 的 数据 到 页 面 里 ， 同 时 会 有 越 来 
越 多 的 框架 和 库 将 用 到 上 自 定 义 数 据 属性 。 相 信 你 在 工作 中 也 能 找到 目 定 义 数据 属性 的 用 武之 地 。 


HTML5 能 够 彻底 地 消灭 div 依 赖 症 ! 





































































































设计 过 复杂 用 户 界 面 的 人 都 知道 基本 的 HIML 表 单 控 件 有 哪些 限制 。 文 本 字段 、 选 择 菜 单 、 
单 选 按 钮 、 复 选 框 等 基本 控件 并 不 能 很 好 地 满足 开发 者 的 需求 。 有 时 ， 你 还 要 反复 教 用 户 如 何 使 
用 繁杂 的 多 选 列 表 一 一 “ 按 住 Ctrl 键 并 点 击 日 标 条 上 日 ,如果 你 用 的 是 Mac, 就 请 按 住 command 键 ”。 


因此 ， 如 同 所 有 优秀 的 Web 开 发 者 一 样 ， 你 也 开始 使 用 jQuery UI  ， 或 者 结合 HTML 、CSS 
及 JavaScript 开 发 目 己 的 控件 或 功能 。 但 如 果 看 到 了 一 个 惠 有 滑动 条 、 日 历 欣 件 、 数 字 调 节 框 、 目 
动 完成 字段 以 及 所 见 即 所 得 编辑 希 的 表单 ， 瞬间 你 会 发 现 目 己 以 前 做 的 葛 是 赦 梦 。 对 于 目 己 开发 
的 控件 , 务必 要 确保 它们 跟 页 面 上 的 其 他 控件 或 其 他 JavaScript 库 不 会 产生 冲突 。 试想 , 你 花 了 几 
个 小 时 开发 出 一 个 日 历 选择 控件 , 之 后 却 发 现 颜 色 选 择 控件 无 法 工作 了 , 原因 是 颜色 选择 控件 代 
但 有 缺陷 ， 导 致 它 无 法 跟 项 目 所 用 的 jQuery 最 新 版 本 兼容 ， 这 该 多 么 打击 人 啊 ! 


如 果 现 在 你 笑 了 ， 那 是 因为 你 也 有 过 类 似 的 经 历 ; 如 果 你 火 冒 三 丈 ， 八 成 还 是 同样 的 原因 。 
但 是 ， 千 万 别 泄 气 ! 本 章 将 使 用 新 的 HTML5S 表 单字 段 类 型 来 创建 一 些 界面 ， 并 实现 目 动 聚焦 及 
占 位 文本 功能 。 接 下 来 , 我 们 将 介绍 客户 端 验 证 功能 , 并 讨论 使 用 新 的 contenteditable 属 性 把 
HTMLIL 和 学 段 转换 为 用 户 输入 控件 。 

在 本 章 中 ， 我 们 将 介绍 以 下 内 容 。 

口 电子 邮件 字段 (<input type="email"> ): 呈现 一 个 用 于 输入 电子 邮件 地 址 的 表单 字段 

(O10.1、 iOS、 A3), 
口 URL 和 学 段 (<input type="urL"> ): 呈现 一 个 用 于 输入 URL 的 表单 字段 (O10.1、iOS5、A3)。 
口 范围 (滑动 条 ) 字段 ( <input type="range"> ): 呈现 一 个 请 动 条 控件 4C5、S4、F23、 
IE 10、O 10.1 )。 
口 数值 字段 (<input type="number"> ): 呈现 一 个 用 于 输入 数值 的 表单 字段 ， 常 显示 为 数 
值 框 (C5、S5、O10.1、iOS5、A3) 
口 颜色 选择 字段 (<input type="color"> ): 呈现 一 个 用 于 指定 颜色 的 表单 字段 (C5、O 11 )。 
口 日 期 选择 字段 (<input type="date"> ): 呈现 一 个 用 于 选择 日 期 的 表单 字段 。 支持 日 期 、 



























































GD http://jqueryui.com/ 
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月 份 或 星期 等 选项 (C5、S 5、0O 10.1 )。 

口 日 期 /时 间 选 择 字 段 (<input type="datetime"> ): 呈现 一 个 用 于 选择 日 期 及 时 间 的 表 
单字 段 。 文 持 日 期 时 间 、 本 地 日 期 时 间或 时 间 等 多 种 选项 (SS5、O 10.1 )。 

口 搜索 字段 (<input type="search"> ): 呈现 一 个 用 于 输入 搜索 关键 字 的 表单 字段 ( C5、 
S4、O 10.1、iOgS )。 

口 自动 聚焦 功能 ( <input type="text" autofocus> ): 支持 将 焦点 放置 在 指定 元 素 上 
(CS、S4)。 

口 占 位 文本 功能 ( <input type="email" placeholder="me@example.com"> ): 支持 在 
表单 字段 中 呈现 占 位 文本 (C5、F4、S4)。 

口 必 填 字段 ( <input type="email" required> ): 如 果 指 定 字 段 未 填 人 值 ， 则 不 允许 提 
交 页 面 (C23、F16、 IE10、0 12 )。 

口 正则 表达 式 验 证 功能 (<input pattern="/ 人 ^(\s*|\d+)$/"> ): 如 果 字 段 内 容 不 匹配 指 
定 模式 ， 则 不 允许 提交 页 面 (C23、F16、IE10、0 12)。 

口 就 地 编辑 功能 (<p contenteditable>lorem ipsum</p> ): 在 浏览 器 中 提供 内 容 的 就 
地 编辑 功能 (C4、F3.5、S3.2、IE6、0O10.1、iOS5、A3 )。 


首先 ， 我 们 将 讨论 一 些 非 常 有 用 的 表单 字段 类 型 。 
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HIML5 引 入 了 几 个 新 的 输入 字段 类 型 ， 通 过 它们 可 以 更 好 地 摘 述 用 户 输入 数据 的 类 型 。 除 
了 标准 的 文本 字段 、 单 选 按钮 以 及 复 选 框 等 元 素 ， 还 可 以 使 用 电子 邮件 字段 、 日 历 、 颜 色 选 择 字 
段 、 数 值 框 以 及 清 动 条 等 元 素 。 浏 览 融 使 用 这 些 新 的 字段 就 能 呈现 更 好 的 控件 效果 ， 无 需 借 助 
JavaScript。 而 移动 设备 及 平板 电脑 的 虚拟 键盘 、 和 触摸屏 , 则 可 以 通过 这 些 字 段 类 型 来 显示 不 同 的 
键盘 布局 。 例 如 iOS 上 的 Safari， 当 用 户 输入 URL 和 电子 邮件 类 型 的 数据 时 ， 系 统 将 显示 交互 键盘 
布局 ， 如 @、.、: 以 及 /这 样 的 特定 字符 都 会 下 接 呈 现 出 来 以 方便 输入 。 

AwesomeCo 公 司 正在 开发 一 个 新 的 项 目 管 理 Web 应 用 程序 , 为 开发 者 及 管理 者 及 时 跟 进 各 个 
在 建 项 目的 进度 提供 便利 。 每 个 项 目 都 有 一 个 名 称 、 一 个 联系 人 电子 邮件 地 址 以 及 一 个 用 于 测试 
的 URL (通过 此 URL， 管 理 者 可 以 在 开发 阶段 预览 网 站 )。 页面 还 有 一 些 其 他 字段 ， 如 开始 日 期 、 
优先 级 以 及 项 目 建设 预 佑 工期 (小 时 数 )。 最 后 ， 开 发 经 理 还 希望 为 每 个 项 目 设置 一 种 颜色 ， 以 
便 在 报表 中 快速 找到 目标 项 目 。 


现在 ， 我 们 将 借助 HTML5 中 的 新 字段 特性 ， 开 发 一 个 项 目 参 数 设置 页 面 的 原型 。 最 终 的 表 
音效 果 如 图 3-1 所 示 。 
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项 目 信息 
姓名 | 

优先 级 人 
预 估 工 期 [本 

开始 日 期 
电子 邮件 地 址 ”已 | 

测试 URL L |] 

项 目标 识 色 [mm | 





3.1.1 表单 描述 

接 下 来 创建 一 个 HTML5 页 面 ， 让 它 包 含 一 个 基本 的 HTML 表 单 ， 表 单 将 提交 P0ST 请 求 ， 假 
设 有 个 目标 页 面 会 处 理 这 个 表单 请 求 。 由 于 对 项 目 名 称 并 没有 特定 要 求 ， 因 此 , 使 用 可 徘 的 文本 
字段 作为 表单 的 第 一 个 输入 字段 。 











html5_forms/index.html 
<form method="post" action="/projects/1"> 


<fieldset id="personal information"> 
<legend>Project Information</legend> 
<OL> 
<11> 
<label for="naeme">Name</label> 
<input type="text" name="name" id="name"> 
</1i> 
<1i> 
<input type="submit" value="Submit"> 
</LIL> 
</OL> 


</fieldset> 


</form> 


我 们 创建 了 一 个 表单 ， 其 标签 包 右 在 一 个 有 序列 表 中 。 在 创建 可 达 性 良好 的 表单 时 , 标签 的 
作用 非 稼 重要。 标签 的 for 属 性 引用 其 关联 表单 元 素 的 ID。 这 样 能 够 帮助 屏 才 阅读 从 识别 页 面 中 
的 相关 字段 。 有 序列 表 提 供 了 一 个 列 出 所 有 字段 的 有 效 方式 ， 避 人 免 采 用 复杂 的 表格 或 滥用 <div> 
标签 ; 同时 也 提供 了 一 种 标识 字段 顺序 并 让 用 户 按 顺 序 填 充 字 段 的 方式 。 一 旦 创建 好 整个 表单 ， 
束 用 CSS 规 则 把 标签 及 其 关联 表单 子 段 排列 在 同一 行 上 。 
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3.1.2 ”使 用 范围 字段 创建 滑动 条 

请 动 条 通常 用 于 让 用 户 减 小 或 增加 数值 ， 开 发 经 理 也 可 用 来 快速 可 视 化 并 修改 项 目 优先 级 。 
在 这 里 ， 我 们 使 用 范围 字段 实现 一 个 滑动 条 。 

html5_forms/index.html 

<label for="Dprzorzty">Priority</LabeL> 

<input type="range" min="0" max="10" 

name="priority" value="©" id="priority"> 
把 上 述 代码 添加 到 表单 的 <Li> 元 素 中 ， 正 如 name 字 段 的 处 理 方式 。 
Chrome 、Safari 以 及 Opera 浏 览 器 都 实现 了 滑动 条 小 部 件 ， 如 图 3-2 所 示 。 





优先 级 f 
图 3-2 
注意 我 们 还 为 这 个 滑动 条 设置 了 最 小 及 最 大 值 ， 这 样 将 限制 这 个 表单 字段 的 取 值 范围 。 


3.1.3 ”使 用 选 值 框 处 理 数 值 

需要 用 户 输入 数字 的 场景 很 多 , 尽管 输入 数字 是 个 很 简单 的 事情 , 但 选 值 框 在 数值 微调 方面 
还 是 能 够 带 来 便利 的 。 选 值 框 是 一 个 带 有 数值 增 减 箭头 框 的 控件 。 在 这 里 用 数值 框 完 成 项 目 建设 
预 估 工 期 字段 (以 小 时 为 单位 )。 数 值 框 除了 方便 数据 输入 ， 还 能 够 用 它 来 清晰 描述 字段 所 持 有 
数据 的 类 型 。 








html5_forms/index.html 
<label for="estimated hours">Estimated Hours</label> 
<input type="number" name="estimated hours" 

min="0" max="1000" 

id="estimated hours"> 


Chrome 、Safari 以 及 Opera 都 文 持 数值 框 控件 ， 如 图 3-3 所 示 。 
Estimated Hours 
图 3-3 
数值 框 同 时 还 为 那些 不 喜欢 操作 箭头 的 用 户 提 供 了 输入 功能 。 与 范围 请 动 条 类 似 , 需要 为 选 


值 框 设置 最 小 、 最 大 值 。 但 是 设置 的 最 小 、 最 大 值 限制 并 不 影响 用 户 输入 的 值 ， 因 此 ， 如 果 需 要 
限制 用 户 输入 值 ， 就 要 借助 脚本 或 HTML5 的 验证 功能 (参见 实例 8 )。 


还 可 以 通过 设置 step 属 性 值 来 控制 增 减 微调 量 。 step 属 性 值 默 认为 1, 也 可 以 对 它 进行 设置 。 
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3.1.4 日 期 选择 字段 


这 个 例子 需要 记录 项 目 开 始 日 期 ， 同 时 , 我 们 和 希望 功能 实现 过 程 尽 可 能 容易 些 。 日 期 选择 字 
段 正 是 一 个 合适 的 解决 方案 。 





html5_forms/index.html 
<label for="start date">Start date</label> 


<input type="date" name="start date" id="start date'" 
value="2013-12-01"> 


日 期 选择 字段 清晰 地 描述 了 字段 所 持 有 数据 的 类 型 , 但 实现 了 功能 之 后 , 看 到 的 却 是 一 个 日 
历 小 部 件 ， 以 下 是 在 Chrome 中 呈现 的 样式 。 


start date a/01/2013 :| 于 
Emall contact Becember 2013 = 二 三 
Staging URL SUn Mon Tue Wed Thu Fri Sat 
Project color 1 2 3 本 5 6 7 
名 岛 10 11 le 二 3 可 
15 6 17 18 19 20 21 
22 23 24 25 26 27 28 Pe——— 
a9 30 31 
图 3-4 


在 编写 本 书 时 ，Chrome 和 Opera 是 当前 仪 有 的 两 个 完全 文 持 日 历 选 择 小 部 件 的 时 面 浏览 耸 ， 
但 在 一 些 移 动 端 训 览 希 上 ， 可 以 利用 该 字段 让 用 户 方 便 地 选择 月 份 、 日 期 以 及 年 份 。 其 他 的 训 览 
人 般 则 只 是 将 该 字段 简单 地 泻 染 成 一 个 文本 字段 。 


3.1.5 ”电子 邮件 字段 


电子 邮件 字段 类 型 用 于 输入 单个 电子 邮件 地 址 或 一 个 电子 邮件 地 址 列表 , 因此 , 它 很 适合 本 
例 中 的 电子 邮件 字段 。 


html5 forms/index.html 
<label for="email'">Email contact</LahbeL> 


<input type="email" name="email" id="email"> 
这 个 表 蛙 字段 给 移动 设备 市 来 的 好 处 更 多 。 因 为 虚拟 键盘 布局 第 常会 应 景 而 变 , 以 帮助 用 户 
更 便捷 地 输入 电子 邮件 。 如 图 3-5 所 示 ，@ 和 从 号 在 iOS 和 Android 的 键盘 中 进行 了 突出 显示 。 
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alwlslhlrlvylul olPr | pepper 
q w e t 
AlsiplFloln kL 
全 zlxjclvjejNjw >] 全 ZXxcvbn nm 人 3 
_123 space je Go 2 [0 . ee 


网 3-5 





3.1.6 URL 字段 


这 个 例子 的 表单 中 有 一 个 测试 URL 字 段 。 而 HTML5 也 引入 了 一 个 专门 用 于 处 理 URL 的 新 字 
段 类 型 ， 这 个 测试 URL 字 上 段 的 实现 代码 如 下 : 





html5_forms/index.html 
<label for= "ur ">stagling URL</LabeL> 


<input type="url" name="uyrtl" id="uril"> 

如 同 电子 邮件 字段 类 型 ， 这 个 字段 类 型 也 特别 适合 :OS 或 Android 等 移动 设备 用 户 使 用 ， 因为 
在 输入 URL 时 , 移动 设备 将 显示 一 个 大 不 一 样 的 键盘 布局 , 该 键盘 布局 带 有 一 些 帮 助 用 户 快速 输 
入 Web 地 址 的 帮助 按键 (如 : /、.com 等 按键 )， 正 如 在 移动 端 浏览 絮 地 址 栏 输入 一 个 URL 时 所 显 
示 的 键盘 布局 。 





3.1.7 ”颜色 选择 字段 


最 后 ， 我 们 还 硕 望 能 够 给 项 目 设置 颜色 ， 这 个 功能 可 以 通过 颜色 选择 字段 类 型 来 实现 。 








html5_forms/index.html 

<label for="project color">Project coLor</LabeL> 

<input type="color" name="project color" id="project color"> 

编写 本 书 时 ， 只 有 少数 浏览 硕 文 持 颜 色 选 择 控件 ， 但 这 并 不 是 阻碍 你 使 用 这 个 字段 的 理由 。 
你 可 以 通过 恰当 的 标记 描述 内 容 ， 这 将 在 以 后 派 上 用 场 ， 特 别 是 在 采取 回 退 方案 的 时 候 。 
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3.1.8 ”给 表单 设置 样式 


接 下 来 使 用 一 些 基 本 的 CSS 代 码 给 表单 设置 样式 。 首 先 创 建 一 个 新 的 CSS 文 件 stylesheets/ 
style.css， 在 页 面 的 <head> 标 签 里 设置 该 样式 表 链 接 。 














html5 forms/index.html 


<link rel="stylesheet" href="stylesheets/style.css"> 


先 移 除 有 序列 表 的 编号 、 外 边 距 以 及 内 边 距 (padding ): 





html5_ forms/stylesheets/style.css 
DLL 
list-style: none ; 
margin: 0; 
padding :0; 


ol 1i{ 
clear: both ; 
margin: © © 10px 0; 
padding: 0; 

| 


之 后 ， 对 齐 标签 及 输入 字段 ， 并 为 输入 字段 设置 样式 。 


html5_ forms/stylesheets/style.css 


labelt 
float: left; 
width: 150px; 
} 


input{ border: lpx solid #333; } 
input:focus{ background-color: #ffe; } 
通过 :focus 伪 类 ， 可 以 为 当前 的 焦点 字段 设置 样式 。 


这 种 方式 给 我 们 带 来 一 个 漂亮 目 语 义 良 好 的 Web 表 单 ， 具 有 一 定 的 技术 前 瞻 性 ， 并 能 够 使 用 
CSS 来 识别 每 个 字段 。 


Chrome 以 及 Opera 文 持 大 多 数 的 新 控件 , 但 在 Firefox、Safari 或 者 正中 , 许多 新 字段 将 显示 为 
普通 的 文本 字段 。 


























3.1.9 回 退 方案 
如 果 浏 览 器 无 法 识别 HTML5 中 新 的 字段 ， 就 会 简单 地 回 退 显 示 这 些 字段 为 普通 的 文本 字段 ， 
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所 以 你 的 表单 仍然 可 用 。 这 时 候 ， 开发 者 可 以 决定 是 否 使 用 第 三 方 小 部 件 或 库 。 例如 ， 先 检查 浏 
览 需 是 否 文 持 日 历 欣 件 ， 如 果 不 文 持 ， 则 可 以 通过 jQuery UI 洪 加 一 个 日 历 控 件 。 等 大 多 数 浏 览 磊 
功能 日 益 完 善 并 支持 所 有 HTML5 新 控件 时 ， 就 可 以 移 除 第 三 方 蔡 代 方 案 了 。 接 下 来 ， 我们 将 为 
颜色 选择 字段 实现 回 退 方案 ， 这 个 处 理 过 程 与 其 他 控件 的 回 退 实现 基本 上 是 一 样 的 。 

1. 替代 颜色 选择 子 段 

多 亏 了 CSS3 的 属性 选择 器 ， 我 们 才 可 以 轻松 借助 jQuery 和 jQuery-simple-color 插 件 " 来 识别 并 
符 代 颜色 选择 字段 。 通 过 color 类 型 来 定位 相应 的 输入 字段 ， 然 后 应 用 jQuery-simple-color 插 件 到 
相应 的 输入 字段 ， 代 码 如 下 所 示 : 


$('input[type=color]').simpleColor(); 


由 于 在 标记 中 使 用 了 新 的 HTML5 表 单 类 型 ， 我 们 无 需 再 为 颜色 选择 字段 添加 额外 的 类 名 或 
其 他 标记 来 识别 自己 。CSS 属 性 选择 喜与 HTML5 可 以 无 颖 搭配 使 用 。 

典型 的 蔡 代 方案 是 使 用 诸如 SimpleColor 这 样 的 插件 ， 我 们 下 载 该 插件 ， 并 在 <script> 标 签 
中 引用 它 , 之 后 使 用 专门 的 JavaScript 代 码 应 用 这 个 插件 到 对 应 元 系 上 。 但 一 般 情 况 下 ,只 有 当 浏 
蚁 妖 不 文 持 HTML5 的 颜色 选择 字段 时 才 采 取 蔡 代 方 案 ， 所 以 ， 首 先 要 用 JavaScript 检 测 浏览 帮 是 
否 文 持 该 字段 。 如 果 不 文 持 ， 我 们 就 自动 加 载 SimpleColor 插 件 。 

首 爷 ， 在 闭 标 签 前 添加 并 加 载 所 需 的 jQuery 库 。 














html5_forms/index.html 
<SCrILpt 
src="http://ajax.googleapis. com/alax/ libs/Tquery/1.9.1/J79uery.min.]s"> 
</script> 
之 后 ， 创 建 一 个 新 文件 javascripts/fallbacks.js。 在 上 述 代码 的 下 面 ， 添 加 一 个 新 的 <script> 
标签 ， 并 引用 该 文件 。 





html5 forms/index.html 


<script srCc=" javascrIipts/faLLpacks.JS'"></ScriIpt> 


接 下 来 ， 在 javascripts/fallbacks.js 文 件 中 创建 一 个 检测 浏览 硕 是 否 文 持 颜色 选择 字段 的 图 数 。 





html5_forms/javascripts/fallbacks.js 


Line1 function hasColorSupport(){ 
- element = document.createElement ("input"); 
element.setAttribute("type", "color"); 
- var hasColorType = (eLement .type === "colLOor"); 
5 ”// 局 部 实现 处 理 
if(hasColorType)t{ 


GD http://recursive-design.com/projects/jquery-simple-color/ 
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Var testString = "foo"; 
element.value = testString; 
- hasColorType = (element.value != testString),; 
10 } 
return(hasColorType); 
EE 
在 该 孔 数 中 ， 用 JavaSceript 创 建 一 个 元 素 ， 并 设置 其 type 属 性 值 为 color。 之 后 , 获取 其 type 
属性 仁 ， 以 判断 浏览 病 是 否 人 允许 设置 type 属 性 。 如 条 返回 一 个 “color” 的 值 ， 则 次 明 浏 览 硕 文 
持 color 类 型 。 
事情 到 了 第 6 行 变 得 有 趣 起 来 。 一 些 浏览 各 部 分 实现 了 color 类 型 。 这 些 浏览 各 支持 颜色 选 
择 字 段 ， 但 不 会 实际 显示 一 个 颜色 选择 小 部 件 。 最 终 ， 页 面 上 还 是 只 显示 一 个 普通 的 文本 字段 。 
因此 , 在 这 个 检测 函数 中 ， 先 为 该 元 系 〈 也 是 一 个 输入 字段 ) 设置 一 个 值 (testString )， 然 后 
判断 是 否 设 置 成 功 。 如 果 设 置 不 成 功 ， 因 为 输入 字段 的 行为 并 不 像 文 本 字段 那样 ， 所 以 ,我们 就 
可 以 进一步 判定 浏览 需 已 经 实现 了 颜色 选择 字段 。 
最 后 , 我 们 调用 检测 函数 。 在 不 需要 SimpleColor 插 件 的 情况 下 要 避免 调用 它 。 如 果 需 要 调用 
SimpleColor 搬 件 ， 可 以 通过 JavaScript 代 码 来 注入 一 个 新 的 <script> 标 签 ， 当 fallbacks.j 脚 本 加 载 
时 ， 这 个 新 的 <script> 标 签 将 加 载 SimpleColor 捕 件 并 激活 它 。 

















html5_forms/javascripts/fallbacks.js 

var applyColorPicker = function()t 
$('input[type=cotlor]').simpleColor(); 

了 


If (!hasColorSupport())t{ 
var script = document .createELement( SCcrIzpt 1) 
script,src = "7Javascrzpts/TJT9Uery,SInpLe-coLor,7s 


if(script,readyState){  // 使 用 IE 浏览 器 
script.onreadystatechange = function () { 


If (this.readyState === 'loaded' || this.readyState === 'complete')t{ 
script.onreadystatechange = null; 
applyColorPicker(); 
} 
}; 
}elset 


// 使 用 其 他 浏览 器 
script.onload = appLYCOLOrPicker ， 
} 


document .getElementsByTagName ("head")[0] .appendChild(script),; 
} 
IE 使 用 onreadystatechange 事 件 作 为 DOM 元 素 加 载 完 成 后 的 执行 函数 ， 并 需要 检测 
readystate 对 象 属性 。 其 他 浏览 右 只 需 简单 地 处 理 onLoad 事 件 。 通 过 包含 下 和 非 了 正 浏 览 硕 的 两 








3.1 实例 $: 使 用 新 的 输入 字段 描述 数据 39 


个 使 用 场景 ， 就 可 以 确保 回 退 实现 能 满足 所 有 浏览 带 的 需要 。 


至 此 ， 回 退 方案 可 以 在 各 个 浏览 帮 中 正常 运行 了 。 接 下 来 ,添加 一 点 CSS 样 式 代码 ， 让 颜色 
选择 字段 与 其 他 列 水 平 对 齐 。 


html5 forms/stylesheets/style.css 
.SimpleColorContainer, .simpleColorDisplay{ 


float: left; 

} 

为 其 他 表单 字段 创建 回 退 方案 的 过 程 与 此 类 似 : 检测 浏览 需 是 否 原生 文 持 对 应 控件 ,如 果 不 
支持 ， 就 加 载 所 需 的 第 三 方 库 并 使 用 JavaScript 实 现 蔡 代 方 案 。 随 着 HTML5 的 普及 ， 最 终 将 偿 渐 
消除 JavaScript 蔡 代 方 案 并 完全 依靠 浏览 右 原 生 的 控件 支持 。 虽然 我 们 的 替代 方案 能 够 奏效 , 但 是 
所 用 到 的 检测 技术 还 比较 脆弱 。 这 里 的 检测 技术 只 以 特定 的 一 系列 浏览 可 为 目标 ,并且 整个 解决 
方案 也 只 针对 颜色 选择 控件 。 但 信 得 庆 竺 的 是 ， 我 们 还 有 一 个 更 好 的 解决 方案 。 


2. 使 用 Modernizr 检 测 特性 


Modernizr 库 可 以 用 来 检测 浏览 器 对 众多 HTML5 和 CSS3 特 性 的 支持 情况 。? 它 并 不 添加 缺失 
的 功能 ， 但 提供 了 一 些 类 似 前 面 我 们 实现 的 检测 方式 ， 并 且 比 我 们 自己 实现 的 更 健壮 。 


在 文档 <head> 标 签 里 、CSS 引 用 之 后 加 载 Modernizr 库 。Modernizr 库 将 提供 一 个 Modernizr 
对 和 象 ， 该 对 象 可 以 用 来 检测 特性 及 加 载 回 退 方案 。 例 如 ， 以 下 代码 演示 了 在 应 用 Modernizr 库 的 
情况 下 ， 如 何 处 理 颜 色 选 择 字 段 的 回 退 实现 。 


If(Modernizr,inputtypes.cCoLor)t{ 
// 浏览 器 支持 COLOr 类 型 

}elsef{ 
// 浏览 器 不 支持 COLOr 类 型 

} 


但 是 ， 当 检测 出 不 文 持 新 特性 的 时 候 ， 我 们 需要 加 载 别 的 第 三 方 库 。 这 时 候 ， 可 以 通过 
Modernizr 的 Load ( ) 方 法 来 检测 特性 并 加 载 其 他 脚本 ， 之 后 ， 当 Load ( ) 方 法 里 面 的 代码 加 载 时 ， 
就 会 相应 地 执行 我 们 目 己 的 代码 ， 实 现代 码 如 下 所 示 。 
































html5_ forms/modernizr/javascripts/fallbacks.js 


var applyColorPicker = function(){ 
$('inputitype=colorj').simpleColor(); 
}; 


Modernizr. loadt( 


{ 


GD http:/www.modernizr.com/ 
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test: Modernizr.inputtypes.color, 
nope: "Javascripts/jquery.simple-color.7]s", 
callback: function(url, result){ 

if (!result)t 


ammliu A a- D1 ~ 
dh 了 iT FL 


} 
| 
} 

Load () 方 法 定义 了 一 个 针对 特定 特性 的 检测 对 象 ， 指 定 特性 存在 或 缺失 时 会 触发 哪些 处 理 。 
当 特 性 得 以 支持 时 , Modernizr 会 加 载 yep 指 定 的 脚本 , 如 采 不 文 持 则 加 载 nope 指 定 的 脚本 。 同 时 ， 
在 Load () 方 法 里 还 可 以 定义 一 个 回调 图 数 ， 一 旦 箱 主 文件 被 加 载 ， 驶 执行 这 个 回调 困 数 。 在 本 
例 中 ， 我 们 检测 颜色 选择 控件 的 文 持 情况 ， 如 果 浏 览 硕 不 文 持 该 特性 ， 就 加 载 jQuery 捕 件 
SimpleColor。 之 后 ， 我 们 在 回调 兽 数 里 用 到 了 resutLt 变 量 ， 如 果 浏 览 硕 文 持 颜 色 选 择 探 件 ， 该 
变量 就 会 返回 true， 和 否则 就 返回 faLse。 换 言 之 ，resutLt 变 量 值 是 检测 对 象 的 检测 结果 。 从 技术 
角度 来 说 ， 这 里 并 不 需要 人 处理 result 变 量 ， 因 为 当 脚 本 加 载 后 ， 回 调 孔 数 就 会 被 释放 。 在 本 例 
中 ， 只 有 在 浏览 亏 不 文 持 颜色 选择 控件 的 情况 下 才 加 载 脚本 。 但 如 有 和 需要， 我 们 也 可 以 使 用 yep 
选项 ， 当 浏览 硕 文 持 颜 色 选 择 控件 时 ， 束 可 以 提供 一 个 加 载 个 性 化 处 理 脚本 的 机 会 。 这 些 脚本 仍 
然 会 调用 回调 函数 ， 我 们 需要 根据 resuLt 变 量 值 在 回调 函数 中 采取 相应 处 理 。 

Load ( ) 方 法 以 yepnope.js 库 为 基础 构建 ， 要 了 解 它 的 运作 机 制 ， 可 以 参考 yepnope.js 文 档 ”。 

要 使 用 Load ( ) 方 法 , 我 们 必须 通过 一 个 在 线 工 具 来 构建 一 个 Modernizr 定 制版 本 ”。 这 个 构建 
工具 包含 了 yepnope.js 库 。 本 书 可 下 载 的 示例 代码 中 包含 了 Modernizr 的 完整 版 本 ,但 这 个 版 本 不 
适合 产品 环境 ， 因 为 你 应 该 只 包含 项 目 所 需 的 那些 Modernizr 组 件 。 

在 项 目 中 使 用 Modernizr 之 前 ， 花 时 间 人 研究 一 下 源码 以 理解 其 运作 机 制 。 无 论 是 否 由 你 来 写 
代码 实现 ， 只 要 你 在 项 目 组 用 到 某 个 技术 ， 你 就 应 该 为 这 个 技术 是 否 被 正确 使 用 负责 。 比 如 ， 
Modernizr 目 前 还 无 法 处 理 Safari 浏 览 硕 对 颜色 选择 字段 的 部 分 文 持 特性 ， 因 此 ， 开 发 者 只 好 在 等 
待 Modernizr 更 新 的 同时 采取 临时 方案 并 调整 其 页 面 。 而 当 Chrome 或 Firefox 的 下 一 个 版 本 出 来 时 ， 
你 可 能 不 得 不 再 次 开发 一 个 共通 解决 方案 ,以 文 持 所 有 的 变更 ; 也 许 你 还 会 把 你 的 解决 方 宁 回馈 
给 Modernizr! 

鉴于 路 浏览 需 检 测 新 特性 的 复杂 度 ， 只 要 是 合适 之 处 ， 本 书 示 例 都 会 使 用 Modernizer 库 。 

除了 新 的 表单 字段 类 型 ，HTML5 还 为 表单 字段 引入 了 一 些 其 他 属性 ， 以 提升 可 用 性 。 接 下 
来 将 讨论 autofocus 属 性 。 

































































GD http://yepnopejs.com/ 
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3.2 ”实例 6: 借助 autofocus 跳 到 表单 第 一 个 字段 


页 面 加 载 时 , 如果 能 把 光标 下 接 定 位 在 表单 的 第 一 个 字段 上 , 束 能 够 切实 加 快 数据 输入 。 许多 
搜索 引擎 通过 JavaScript 来 实现 这 个 功能 , 现在 , HTML5 已 将 此 功能 作为 语言 的 一 部 分 给 予 支 持 了 。 


你 要 做 的 只 是 把 autofocus 属 性 添加 到 具体 的 表单 字段 中 。 











html5 forms/autofocus/index.html 


<label for=' name">Name</LabeL> 
<input type="text" name="name" autofocus id="name"> 


不 必 将 autofocus 属 性 设 为 true 或 autofocus， 只 要 autofocus 属 性 在 字段 中 出 现 ， 相 应 特 
性 便 会 在 浏览 硕 中 生效 。 

为 了 顺利 实现 目标 , 一 个 页 面 只 能 有 一 个 autofocus 属 性 。 如 条 设置 了 多 个 autofocus 属 性 ， 
浏览 需 只 会 将 光标 定位 在 最 后 设置 的 那个 表单 字段 上 。 








回 退 方 条 

我 们 可 以 检测 autofocus 属 性 是 否 存在 ， 如 采用 户 浏 览 硕 不 文 持 该 属性 ， 台 用 一 点 点 
JavaScript 代 码 将 焦点 设置 在 具体 元 素 上 。 这 大 概 是 你 能 够 想到 的 最 简单 的 回 退 方案 了 。 添加 这 上 段 
代码 到 javascripts/fallbacks.js 文 件 中 。 











html5_ forms/autofocus/javascripts/fallbacks.js 


If (!Modernizr.autofocus ){ 
$('inputlautofocusj').focus!(), 


这 上 段 代码 使 用 了 jQuery 来 实现 将 光标 定位 到 具体 字段 的 功能 。 当然 也 可 以 使 用 原生 JavaScript 
代码 来 实现 ， 但 由 于 前 面 已 经 加 载 了 jQuery， 并 且 可 以 通过 属性 选择 髓 来 获取 设置 有 autofocus 
属性 的 字段 ， 而 不 用 添加 特定 类 或 ID ， 所 以 ， 这 里 优先 选择 了 jQuery 的 实现 方式 。 

autofocus 属 性 使 得 页 面 加 载 后 的 表单 操作 更 加 便捷 ， 但 开发 者 可 能 还 希望 就 所 输入 内 容 的 
类 型 给 用 户 一 些 具 体 提示 。 接 下 来 看 看 placeholder 属 性 。 











3.3 实例 7: 通过 占 位 文本 提供 提示 信息 

占 位 文本 为 用 户 提 供 如 何 填充 字段 内 容 方 面 的 说 明 。 它 并 非 <Labe1l> 标 签 的 蔡 代 品 ， 只 是 给 
用 户 提 供 一 个 输入 示例 。 

AwesomeCo 公 司 的 支持 网 站 需要 用 户 注册 一 个 账号 ,注册 过 程 中 一 个 最 大 的 问题 就 是 用 户 使 
用 不 安全 的 密码 。 因 此 ， 接 下 来 使 用 占 位 文本 ( 见 图 3-6 ) 给 用 户 提 供 一 些 密码 设置 要 求 方面 的 
引导 。 考 卡 到 一 至 性 ， 我 们 一 并 给 其 他 字段 也 添加 上 占 位 文本 。 























ie 


Create New Account 


First Name 
| 

Last Name 

Ermail 


Password 


Password Confirmation 


Sigh Up 





图 3-6 ” 占 位 符 能 够 帮助 用 户 理解 他 们 应 该 怎么 做 
为 了 设置 占 位 文本 ， 我 们 为 每 个 输入 字段 都 添加 pLacehoLder 必 性， 代码 如 下 所 示 。 








html5_placeholder/index.html 
<input id="email" type="email" 
name="email" placeholder="yser@example,com"> 


一 旦 为 每 个 输入 字段 添加 好 了 占 位 文本 ， 整 个 表单 标记 的 实现 代码 如 下 。 





html5_placeholder/index.html 


<form 1d=" Create account" action="/signuyp" method="post"> 
<fieldset id="signup"> 
<Llegend>Create New Account</Legend> 
<OL> 
<l1> 
<label for="first name">First Name</LabeL> 
<input id="first name" type="text" 
autofocus 
name="first name" placeholder="'John'"> 
</11> 
<l1> 
<label for="last 1 Nam 
<input id="iast name" type="text" 
Name=" Last_name" placeholder="'Smith'"> 


1 ac++ hlamMmAa 
LOL | 1 


a》mAalle. 
ili CC 
1 


< /LIL> 
<L1> 
<label for="email">Email</label> 
<input id="email" type="email" 
name="email" placeholder="user@example.com"> 
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</1i> 
<li> 
<label for="password">Password</tTlabel> 
<input id="password" type="password" name="password" value="" 
autocomplete="off" placeholder="8-10 characters" /> 
</1i> 
<LIL> 
<label for="password confirmation">Password Confirmnation</LabeL> 
<input id="password confirmation" type="password" 
name="password confirmation" value="" 
autocomplete="off" placeholder="Type your password again" /> 





</11i> 
<li><input type="submit" value="Sign Up"></1i> 
</ol> 
</fieldset> 
</form> 
细心 的 读者 会 注意 到 我 们 为 表单 的 密 但 字段 添加 了 一 个 autocomptLete 属 性 。HTMLS 引 入 了 
autocomptLete 属 性， 用 来 告知 训 览 融 不 要 目 动 填充 该 字段 的 数据 。 某 些 浏览 大 会 默认 记 住 用 户 
先前 输入 的 数据 ， 而 在 某 些 情 次 下， 我 们 希望 浏览 需 阻 止 用 户 这 么 做 。 


由 于 这 里 再 次 使 用 了 有 序列 表 来 组 织 表单 字段 ， 因 此 ， 需 要 添加 一 些 基本 的 CSS 样 式 代 码 ， 
让 表单 看 起 来 更 漂 漆 亮 O 〇 




















html5_placeholder/stylesheets/style.css 
fieLdset{ 

width: 216px; 
} 


fieldset olf{ 
list-style: none; 
padding :0 ， 
margin:2px; 


} 


fieldset ol 1if{ 
margin:0 0 9px 0; 
padding :0 ， 

} 


/* 让 输入 字段 回 到 自己 的 行 */ 

fieldset Inputi{ 
display:block; 

} 


现在 Safari、Opera 和 Chrome 的 用 户 将 看 到 表单 字段 里 的 帮助 信息 ( 占 位 文本 ),。 但 Firefox 和 IE 
还 不 能 很 好 地 支持 placeholder 属 性 ， 接 下 来 实现 回 退 方案 ， 让 Firefox 和 IE 也 能 达到 同样 的 效果 。 
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回 退 万 案 


让 老式 浏览 硕 支 持 占 位 人 特有 很 多 解决 方案 , 但 最 简单 的 方案 莫 过 于 使 用 jQuery Placeholder 插 
件 "。 这 个 插件 的 使 用 方式 与 实现 颜色 选择 字段 回 退 方案 的 方式 相同 : 检测 浏览 絮 对 placeholders 
属性 的 文 持 情况 ， 在 训 览 部 不 支持 该 属性 时 加 载 并 激活 这 个 插件 。 


创建 一 个 新 文件 j avascripts/fallbacks.js ， 准备 为 我 们 的 表单 实现 回 退 方 案 。 然 后 ,在 HTML 页 
面 的 底部 使 用 <script> 标 签 引 入 该 文件 。 











html5_placeholder/index.html 


<script 

src='http://ajax.googleapis.com/ajax/ libs/jquery/i1.9.1/j9uery.min.Js'> 
</script> 
<script src='javascripts/fallbacks.is'></script> 


在 这 里 我 们 将 再 次 使 用 Modernizr， 这 就 意味 着 我 们 需要 在 页 面 <head> 区 域 添加 Modernizr 库 
的 引用 ， 以 便 它 能 正确 运行 。 








html5_placeholder/index.html 


<script Src=' JavascrIpts/1odernIzr .JS'></VScriIpt> 


在 javascripts/fallbacks.js 文 件 中 ， 定 义 了 一 个 调用 jQuery Placeholder 插 件 的 呆 数 。 


html5_placeholder/javascripts/fallbacks.js 


var applyPlaceholders = function(){ 
$("input").placeholder(); 
} 


接 下 来 ， 使 用 Modernizr 检 测 pLacehoLder 属 性 的 文 持 情况 ， 加 和 载 jQuery Placeholder 插 件 ， 并 
调用 回 退 方案 。 


html5_placeholder/javascripts/fallbacks.js 
Modernizr. load( 


{ 
test: Modernizr.placeholder., 
nope: "Javascripts/jquery.placeholder.]s", 


callback: function(url, result)t 


1f f | 广 呈 和 1 十 YY 了 
六 SU 


appLyPLacehoLders () ; 
} 
} 
} 
1 


GD https://github.com/mathiasbynens/jquery-placeholder 
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现在 ,我们 得 到 了 一 个 相当 不 错 的 解决 方案 , 不 管 你 使 用 什么 浏览 右 ， 这 个 方案 使 得 占 位 文 
本 功能 对 Web 应 用 来 说 都 是 有 效 的 。 


在 提示 用 户 该 用 何 种 方式 输入 数据 方面 ， 占 位 符 是 一 个 非常 有 效 的 方式 。 但是, 开发 者 可 能 
还 希望 通过 确保 用 户 以 正确 方式 填充 了 字段， 来 给 用 户 更 多 的 5 引导。 





3.4 实例 8: 不 借助 JavaScript 验证 用 户 输入 


我 们 创建 Web 表 单 ， 是 为 了 从 用 户 那里 获取 用 户 输 入 数据 并 存储 它 ， 或 者 处 理 数据 将 其 转换 
为 有 用 的 信息 。 请 求 数据 中 ， 一 部 分 数据 可 能 是 必须 提供 的 ， 而 其 他 数据 是 可 选 的 。 有 时， 数据 
需要 按 一 定格 式 输入 ,并 在 存储 数据 之 前 对 其 进行 有 效 性 验证 ,这 样 可 以 为 用 户 提 供 修 正 的 机 会 。 
习惯 上 , 考虑 到 客户 端 JavaScript 验 证 技术 很 容易 被 禁用 , 开发 者 往往 会 用 服务 需 端 代码 验证 用 户 
输入 。 由 于 用 户 不 得 不 填写 字段 、 提 交 表 单 ， 然 后 再 等 竺 整个 页 面 刷新 以 观察 是 否 有 错误 发 生 ， 
所 以 服务 硕 端 验证 过 程 缓慢 ， 吾 来 的 用 户 体验 非常 精 糕 。 为 了 给 用 户 提供 啊 应 快速 的 体验 ,开发 
者 最 终 还 是 要 写 客 户 端 JavaScript 验 证 代码 , 实际 上 编写 了 两 次 验证 代码 (服务 着 端 及 客户 闪 验 证 
代码 )。 这 种 方式 存在 一 系列 的 问题 。 

HTML5 引 入 了 表单 元 素 的 几 个 相关 属性 ， 用 于 客户 端 验证 用 户 输 入 ,借助 这 些 属性 ， 我 们 
可 以 在 请 求 发 送 到 服务 磊 端 之 前 捕捉 到 一 些 简 单 的 输入 错误 ， 无 需 通 过 JavaScript。 

AwesomeCo 公 司 提供 的 网 站 注册 页 面 是 测试 这 些 新 属性 的 一 个 极 佳 场所 。 用户 在 注册 时 , 需 
要 提供 他 们 的 姓名 、 邮 件 地 址 ， 还 需要 输入 密码 。 接 下 来 ,我 们 来 验证 姓名 以 及 电子 邮件 字段 是 
否 被 填充 。 


如 同 <autofocus> 属 性 的 应 用 方式 那样 ， 我 们 通过 在 元 素 中 添加 redquired 属 性 ， 来 要 求 用 
户 填 充 表 单字 段 。 因 此 ， 我 们 可 以 在 初始 注册 表单 的 First Name、Last Name 以 及 Email 字段 中 添 
加 required 属 性 。 

































































html5_validation/index.html 
<LIL> 
<label for="first name">First Name</LabeL> 


<input id="first name" type="text" 
autofocus="true" 
required 
name=" first name" placeholder="'John'"> 
</1i> 
<l1i> 
<label for="ilast name">Last Name</label> 
<input 1d=" Last name" type="text" 
required 
name=" Last name" placeholder="'SmIith'"> 
</1i> 
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<LIL> 
<label for='"emaiL">EmaiL</LabeL> 
<input id="email" type="email" 
required 


name="emait" placeholder="uyser@example. com"> 
</1i> 








文 持 该 属性 的 浏览 大 在 这 些 字 段 未 被 填充 的 情况 下 将 阻止 表单 提交 操作 。 同 时 , 我 们 会 得 到 
一 个 相关 的 错误 提示 信息 ， 而 且 ， 连 一 行 JavaScript 验 证 代码 都 无 需 我 们 填写 ! Chrome 的 处 理 情 
形 如 图 3-7 所 示 。 











First Name 


Last Name 


Ermail 





图 3-7 


我 们 同时 也 指定 Email 字段 为 必 填 字段 ， 这 样 可 以 给 我 们 的 操作 带 来 便利 。 同 时 ， 对 于 Email 
字段 ， 用 户 必 须 输入 电子 邮件 地 址 格式 的 内 容 。 








图 3-8 是 使 用 表单 字段 描述 数据 的 男 一 个 原因 。 图 中 显示 了 三 个 必 填 字段 ， 值 得 注意 的 是 ， 
要 确保 Password 字 有 段 满足 最 少 8 个 字符 数 的 要 求 。 





Email 


Password . 
0 Please enter an email address. 


Password Confirmation | 
| Sign Up 





3.4.1 正则 表达 式 验 证 


通过 pattern 属 性 可 以 指定 正则 表达 式 以 验证 用 户 数据 。 现 在 ,浏览 器 已 经 能 够 验证 电子 邮 

件 地 址 以 及 URL 了， 但 针对 Password 字 段 ， 我 们 还 要 进一步 设置 具体 规则 ， 为 其 添加 pattern 属 

性 , 通过 正则 表达 式 规 则 强制 要 求 密码 不 少 于 8 个 字符 ， 且 至 少 包 括 1 个 数字 、 一 个 大 写字 母 以 及 
-个 特殊 字符 。 








html5_validation/index.html 
<LIL> 
<label for='passworad'>Password</LabeL> 
<input id="password" type="password" name="password" value="" 
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autocomplete="off" placeholder="8-10 characters" 
pattern="^(?=, 18,})(?=,*[a-2zZ1) (?=. *[A-Z1)(?=. *[Nd){ ?=,. *[ VWI).,*$" 
title="Password must be 8 or more characters with at 
least one nymber, an Uppercase letter, and one special character" 
/> 
</1i> 


请 注意 ， 在 这 里 我 们 使 用 了 tittLe 属 性 ， 为 用 户 应 输入 的 内 容 提供 描述 信息 。 


现在 , 如 来 输入 不 匹配 的 内 容 , 浏览 硕 将 显示 一 个 错误 提示 信息 (如 图 3-9 所 示 ) 而且 titte 
属性 的 内 容 会 被 浴 加 到 错误 提示 信息 中 。 











Password ep | 


Password Confirmation | — 
站 Please match the requested format. 


Password must be 8 or more characters with at 


sign Up least one number, an uppercase letter, and one 


special character 








图 3-9 
我 们 还 希望 密码 确认 字段 也 采用 同样 的 模式 。 


html5_validation/index.html 
<LI> 
<label for="password confirmation">Password Confirmation</LabeL> 
<input id="password confirmation" type="password" 
name="password confirmation" value="" 
autocomplete="off" placeholder="Type your password again" 
pattern=" (= 1a-21) (r= IA- LI (ee Id) (r= I WINS 


title="Passworg confirmation must be 8 or more characters with at 
Least one number, an uppercase letter, and one special character" 
/> 
</11i> 
还 有 一 件 事情 无 法 借助 这 些 验证 属性 来 完成 : 确保 密码 字段 与 密码 确认 字段 的 内 容 一 致 。 这 
时 ， 我 们 需要 借助 JavaScript 来 处 理 。 


3.4.2 ”为 字段 添加 样式 


表单 已 经 具备 了 基本 的 样式 , 但 现在 的 字段 上 有 了 更 多 的 信息 ,利用 这 些 信息 可 以 突出 显示 
错误 字段 。 一 些 浏 览 楷 ， el 在 非法 输入 的 字段 失去 焦点 时 会 高 亮 显示 。 画 一 些 浏 览 句 只 
有 在 表单 被 提交 时 才 会 提供 反馈 信息 。 我 们 来 设置 一 点 样式 ， 以 便 为 用 户 提 供 即 时 的 反馈 信息 。 


在 相应 的 样式 声明 中 使 用 :vatid 和 :invaLid 伪 类 



































html5_validation/stylesheets/style.css 


inputirequired}:invalid, input/pattern}j:invalidt{ 
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border-color: #A5340B ， 
} 


input/requiredi :valid, input/pattern]:validt{ 
border-color: #0B9900; 
} 


现在 ， 当 用 户 改 变 字段 内 容 时 ， 将 获得 相应 的 可 视 信 息 反 馈 。 





3.4.3” 回 退 方 案 


最 人 徇 单 的 回 退 方案 就 是 什么 都 不 做 。 浏览 兹 将 忽略 required 和 pattern 属 性 ， 因 此, 你 可 以 
通过 服务 絮 端 验证 捕捉 错误 。 但 是 ， 如 果 你 想 做 得 更 完美 一 些 的 话 ， 可 以 考虑 通过 required 和 
pattern 属 性 实现 你 自己 的 验证 功能 。 也 可 以 考虑 采用 第 三 方 库 ， 如 H5F， 其 功能 极其 强大 ， 你 
可 以 把 它 放 到 页 面 上 并 激活 它 。" 不 像 其 他 库 , 检测 浏览 器 是 否 支持 HTML5 新 特性 并 不 是 必须 的 ， 
为 HSF 会 自动 检测 并 利用 既 有 浏览 吉 的 支持 特性 。 

为 了 使 用 HSF 库 ， 需 要 引入 并 激活 它 。 再 次 通过 Modernizr 来 检测 HTMLS 新 特性 并 加 载 HSF 
库 。 虽然 H5F 实 现 了 新 特性 检测 ， 我 们 还 是 希望 尽 可 能 少 地 加 载 额外 脚本 代码 ， 并 且 我 们 已 经 在 
占 位 文本 的 回 退 方案 中 使 用 了 Modernizr。 因 此 , 我 们 将 按照 以 下 代码 来 修改 已 有 的 Load() 函数 。 




















html5_validation/javascripts/fallbacks.js 


> Modernizr,.Load([ 
{ 
test: Modernizr.placeholder., 
nope: "Javascripts/jquery.placeholder.,7s", 
callback: function(url, result)t 
If (I!result)t{ 
applyPlaceholders(); 
} 
} 


吧 


test: Modernizr.pattern &é& Modernizr.required, 
nope: "Javascripts/h5f.min,7s", 
callback: function(url, result)t 
if (Iresult) { 
configureHSF(); 
} 
} 


人 人 人 人 人 人 全 多 仆人 


} 
] ) ; 


GD https://github.com/ryanseddon/HSF 
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接 下 来 ， 为 了 激活 HSF， 我 们 实现 以 下 代码 。 


html5_validation/javascripts/fallbacks.js 


var configureHSF = function()t 
H5F.setupltdocument .getELementById(t' create account")), 


load() 浮 数 的 参数 是 一 个 字符 串 、 一 个 对 象 或 一 个 对 象 数 组 。 现 在, 我 们 要 传人 两 个 对 象 给 
Modernizr.load() (而 不 是 原先 的 一 个 对 象 )。 为 此 , 我 们 把 两 个 传人 对 象 放 进 数组 中 。 这 也 是 
把 对 象 包装 在 方 括号 里 的 原因 。 

我 们 在 代码 中 使 用 了 document .getELementById() ， 这 是 因为 HSF 需 要 标准 DOM 元 素 。 如 
果 使 用 jQuery 获取 元 素 ， 最 终 就 会 得 到 一 个 jQuery 对 象 而 不 是 标准 元 素 对 象 ， 导 致 H5F 不 知道 如 
何 处 理 。 

客户 端 验 证 使 得 用 户 不 用 等 竺 服务 端 啊 应 或 页 面 刷新 ,就 可 以 看 到 所 犯错 误 。 但 请 记 住 这 个 
特性 有 可 能 被 禁用 、 不 文 持 或 错误 地 实现 ， 因 此 ， 你 仍 需要 确保 实现 了 服务 需 端 验证 功能 。 

表单 字段 并 非 是 让 用 户 输入 数据 到 Web 页 面 的 唯一 途径 。 接 下 来 看 看 让 用 户 输 入 文本 到 标准 
HTML 元 素 里 是 如 何 实现 的 。 
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我 们 一 直 在 寻求 一 些 有 歼 方 式 , 让 用 户 与 应 用 程序 间 更 方便 地 交互 。 例 如 ,有 时候 我 们 希望 
用 户 不 用 导航 到 别 的 表单 就 可 以 就 地 编辑 他 们 的 介绍 信息 。 过 去 我 们 往往 会 点 击 文本 显示 位 置 ， 
然后 用 文本 字段 取代 该 显示 区 域 ， 从 而 实现 就 地 编辑 功能 ; 然后 文本 字段 通过 Ajax 方式 传送 更 改 
信息 给 服务 端 。HTML5 引 入 了 contenteditabtLe 新 属性 ， 它 负责 自动 提供 数据 输入 功能 。 我 们 
仍 需要 编写 将 数据 发 送 至 服务 端的 JavaScript 实 现代 人 码 , 以 便 保存 数据 ,但 有 J 了 contenteditable 
属性 之 后 ， 就 不 用 再 创建 这 么 多 表单 字段 并 来 回 切换 它们 的 显示 状态 了 。 

AwesomeCo 公 司 当 前 有 一 个 项 目 需要 提供 用 户 资料 的 修改 功能 。 用 户 资料 页 面 将 显示 用 户 姓 
名 、 所 在 城市 、 所 在 州 、 邮 政 编码 以 及 电子 邮件 地 址 等 信息 。 接 下 来 ,我 们 为 用 户 资 料 页 面 添加 
一 些 就 地 编辑 功能 ， 实 现 效果 如 图 3-10 所 示 。 















































User information 


Hugh Mann 


Anytown 
O 


92110 
boss@awesomecompany.com 




















图 3-10 ”就 地 编辑 变 得 容易 了 


在 开始 之 前 , 我 要 声明 一 下 , 用 客户 端 JavaScript 代 码 实 现 某 个 功能 而 非 首 要 考虑 服务 端 解决 








-大 
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方案 的 做 法 ,违背 了 构建 可 达 性 良好 的 Web 应 用 程序 的 理念 。 在 这 里 之 所 以 这 样 做 ， 是 为 了 把 重 
点 放 在 阐述 contenteditable 属 性 的 用 法 上 , 同时 ,这 有 段 代码 也 并 非 生 产 代 码 。 通 第 情况 下 , 优 
先 构 建 不 依赖 JavaScript 的 解决 方案 (比如 服务 端 解决 方案 )， 之 后 再 创建 对 应 的 JavaScript 脚 本 方 
案 。 最 后 ,在 你 只 改动 其 中 一 种 方案 时 , 一 定 要 对 两 种 方案 都 编写 自动 测试 案例 ， 以 便 尽 最 大 可 
能 捕获 bug。 只 要 有 可 能 ， 就 要 在 非 JavaScript 解 决 方案 基础 之 上 再 考虑 构建 JavaScript 解 决 方案 。 
从 长 远 来 看 ， 这 可 以 让 你 最 终 拥有 良好 的 标记 和 代码 结构 ， 以 及 更 好 的 可 达 性 。 











3.5.1 用 户 资料 表单 

HTML5 引 入 的 contenteditable 属 性 几乎 可 以 应 用 在 所 有 元 素 上 。 只 需 简 单 地 在 元 素 中 添 
加 该 属性 ， 就 可 以 把 该 元 素 转变 成 可 编辑 字段 。 接 下 来 ,我 们 要 构建 用 户 资料 表单 。 利 用 标准 的 
HTML 模 版 创建 一 个 新 页 面 show.html: 








html5_ content editable/show.html 


<1DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta charset="utf-8"> 
<title>Show User</title> 
<link rel="stylesheet" href="stylesheets/style.css"> 
</head> 
<body id="forms"> 
</body> 
</html> 


在 <body> 标 签 中 ， 添 加 可 编辑 字段 。 


html5_content_editable/show.htmil 
<hl>User Information</vh1L> 
<div id="status"></div> 
<UL data-url="/users/1"> 
<11> 
<b>Name</b> 
<span id="name" contenteditable>Hugh Mann</span> 
</1i> 
<11i> 
<b>City</b> 
<Span id="city" contenteditable>Anytown</span> 
</1i> 
<11> 
<b>State</b> 
<span id="state" contenteditable>0H</span> 
</1i> 
<11i> 
<b>Postal Code</b> 
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<span id="postal _ code" contenteditable>92110</span> 
</11> 
<11i> 
<b>Email</b> 
<Span id="email" contenteditable>boss@awesomecompany .com</span> 
</1i> 
</ul> 


我 们 可 以 通过 一 些 CSS 样 式 设 置 ， 让 页 面 看 起 来 更 漂亮 些 。 另 外 ， 除 了 一 些 让 字段 按 行 排列 
的 基本 样式 设置 以 外 , 我 们 还 将 识别 可 编辑 字段 ,以便 在 鼠标 悬 停 或 用 户 选 择 时 改变 这 些 字 段 的 
颜色 。 创 建 一 个 新 的 样式 表 文 件 stylesheets/style.css， 代 码 如 下 。 








html5_content_editable/stylesheets/style.css 
Line1 ul{list-style:none;} 


- LL>b，LL>spantf 
display: block; 
5 float: left; 
width: 1l100px; 
we 
- 1i > spant{ 
10 width:500px; 


margin-left: 20px; 
a 


- LL > span/[contenteditable]:hovert{ 
15 background-color: #ffc; 


- } 


- li > span[contenteditable]:focust{ 
background-color: #ffa; 
20 border: lpx shaded #000; 
Ry 


- li{clear:left;} 
第 3 行 设置 标签 文字 和 <span> 标 签 按 行 排列 。 之 后 在 第 14 行 和 第 18 行 分 别 通 过 CSS 属 性 选择 
需 添 加 巧 俘 及 聚焦 效果 。 


这 些 就 是 前 端 要 完成 的 工作 。 用 户 现在 可 以 很 方便 地 在 页 面 上 修改 数据 。 好 了 ,好 好 保存 这 
些 代码 吧 。 





3.5.2 ”数据 持久 化 


虽然 用 户 可 以 修改 数据 ,但 一 旦 页 面 刷 新 ， 或 是 通过 导航 离开 页 面 ， 所 有 的 修改 虱 将 于 失 。 
我 们 需要 考虑 一 种 提交 这 些 修 改 信息 至 后 台 的 办 法 一 一 通过 jQuery 就 可 以 轻松 实现 。 如 采 你 以 前 











52 第 3 章 创建 友好 的 Web 表单 


使 用 过 Ajax 技术 ， 这 里 涉及 的 处 理 方 法 对 你 而 言 就 没什么 新 鲜 的 了 。 


首先 ， 创建 一 个 新 的 JavaScript 文 件 javascripts/edit.js， 然 后 在 HTML 页 面 底 端 、</body> 闭 标 
签 之 前 引用 该 文件 和 jQuery 库 。 
html5_content_editable/show.htmil 
<script 
src="http://ajax.googleapis. com/ajax/ Libs/jquery/1.9.1/jquery.min.1s"> 
</script> 
<script src="J7avascripts/edit.7s"></script> 


接 下 来 ， 编 号 当 数 据 修改 时 进行 保存 的 代码 。 


html5_content_editable/javascripts/edit.js 
$("'#edit profile LInK") .hide() ，; 
Var status = $("#status"); 
$("span[contenteditable]").blur(function()}){ 
Var field = $(this).attr("id"); 
Var value = $(this).text(); 


Var resourceURL = ${(this}.closest("ut").attr("daeata-urt").; 


$.ajax(t{ 
url: resourceURL, 
dataType: "Json", 
method: "PUT", 
data: field + "=" + value, 
success: function(data)t{ 
status.html("The record was saved."); 
上 
error: function(data)t 
status.html("The record failed to save."); 
} 
由 
门 ” 


we 

我 们 为 页 面 中 包含 contenteditabte 属 性 的 每 个 <span> 标 签 添加 事件 监听 硕 。 因 此 ， 当 用 
户 通过 Tab 键 离开 字段 ， 我 们 要 做 的 就 是 用 jQuery 的 ajax() 方 法 提交 数据 给 服务 融 端 代 人 码 。 当 实 
现 Web 页 面 时 ， 我 们 给 <uL> 标 签 的 data-urt 属 性 添加 上 服务 需 端 URL， 因 此 ， 在 这 里 获取 URL 
并 构建 到 服务 端的 请 求 。 这 只 是 一 个 例子 , 我们 并 未 提供 一 个 后 人 台 程 序 来 保存 这 些 数据 ， 要 实现 
它 已 超出 了 本 书 内 容 范 畴 。 不 过 ， 你 将 在 第 9 草 学 到 在 客户 端 保存 用 户 数 据 的 一 些 方法 。 











3.5.3 回 退 方案 
我 们 已 经 实现 了 许多 功能 ， 这些 功能 并 不 能 保证 对 所 有 的 用 户 都 有 效 。 首先 , 我 们 通过 基于 
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JavaScript 的 解决 方案 保存 编辑 结 末 至 服务 端 , 这 并 非 好 的 方式 。 与 其 担心 用 户 在 使 用 我 们 的 技术 
方面 存在 障碍 ,还 不 如 让 用 户 选 择 是 否 使 用 一 个 单独 的 用 户 资 料 表单 页 面 。 诚然 , 这 会 导致 更 大 
的 编码 量 。 但 是 ， 开 发 者 必须 考虑 到 以 下 可 能 的 场景 。 


口 用 户 的 浏览 套 并 不 文 持 contenteditabLe 属 性 。 

口 用 户 虽 然 使 用 现代 浏览 右 ， 但 是 因为 不 喜欢 JavaScript 而 将 其 禁用 (这 种 情况 比 你 想象 中 
的 更 名 见 )。 

口 用 户 在 阻止 JavaScript 的 防火 墙 软件 后 面 工作 。 信 不 信 由 你 ， 这 种 防火 墙 软 件 是 存在 的 ， 
对 用 户 和 开发 者 来 说 ， 这 都 是 个 悲剧 。 


说 到 底 , 通过 一 个 表单 发 送 P0ST 请 求 到 服务 并 同一 个 处 理 Ajax 更 新 的 页 面 , 这 种 方式 应 该 是 
最 合理 的 。 如 何 做 取决 于 你 自己 , 但 许多 框架 通过 检查 accept header 能 够 检测 请 求 类 型 ， 以 判定 
请 求 源 于 普通 的 POST 请求 还 是 一 个 XMLHttpRequest 对 象 。 在 这 种 情况 下 ， 你 能 够 充分 利用 原 有 
的 服务 右 端 代码 , 达到 “DRY”" 的 目的 。 如 果 浏 览 妖 支持 contenteditable 属 性 以 及 JavaScript， 
我 们 就 隐 妃 该 表单 的 链接 。 

我 们 创建 一 个 新 页 面 edit.html， 实 现 一 个 标准 编辑 表单 ， 发 送 P0ST 请 求 到 前 面 Ajax 实 现 版 本 
用 到 那个 的 服务 端 页 面 。 



































html5_content_editable/edit.html 
<1DOCTYPE htmL> 
<html lang="en-US"> 
<head> 
<meta charset="utf-8"> 
<title>Editing Profile</title> 
<link rel="stylesheet" href="stylesheets/style.css'"> 
</head> 
<body> 
<form action="/users/1" method="post" accept-charset="utf-8"> 
<fieldset id="your_information"> 
<Legend>Your Information</Legend> 
<OL> 
<1i> 
<label for="name">Your Name</label> 
<input type="text" name="name" value="" id="name"> 
</1i> 
<LIL> 
<label for="city">City</label> 
<input type="text" name="city" value="" id="city"> 
</11i> 
<1i> 
<label for="state'>9tate</LabeL> 


() DRY 指 “Don’t Repeat Yourself”( 不 要 重复 你 自己 ), 由 Dave Thomas 和 Andy Hunt 在 The Pragmatic Programmer 一 书 
中 提出 。 
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<input type="text" name="state" value="" id="state'"> 
</1i> 
<11i> 
<label for="postal code">Postal Lode</LabeL> 
<input type="text" name="postal code" value="" id="postal code'"> 
</1i> 
<11i> 
<label for="email">Email</label> 
<input type="email" name="email" value="" ijid="email"> 
</1i> 
</ol> 
</fieldset> 
<p><input type="submit" value="Save"></p> 
</form> 
</body> 
</html> 








我 们 在 stylesheets/style.css 中 添加 一 些 样式 ， 让 表单 看 起 来 更 识 亮 些 ， 所 采用 的 样式 与 前 面 实 
现 的 其 他 表单 类 似 。 





html5_content_editable/stylesheets/style.css 


olf 
padding :0; 
margin: 0; 
list-style;: none; 
} 
ol > 1i{ 
padding: 0; 
clear: both, 
margin: © 0 10pX 0; 
} 
label1{ 
width: lS50px; 
flLoat: Left: 
} 


/+ EN:edit styles */ 


接 下 来 ， 在 show.html 文 件 中 添加 到 edit.html 的 链接 。 








html5_content editable/show.html 
<hli>User initormation</hl> 
<section id="edit profile link"> 
<p><a href="egdit,html">Edit Your Profile</a></p> 
</section> 
<div id="status"></div> 


3.6 “未 来 展望 55 


添加 了 这 个 链接 后 , 接 下 来 需要 修改 我 们 的 JavaScript 脚 本 代码 。 我 们 希望 在 支持 可 编辑 内 容 
时 隐藏 连 到 编辑 页 面 的 链接 ， 并 提供 Ajax 实现 功能 。 检 测 方式 相对 人 简单， 无 需 用 到 Modernizr 库 。 
我 们 只 需要 判断 某 个 元 系 中 是 否 存 在 contenteditable 属 性 。 








htmlSs_content editable/javascripts/edit.js 
var hasContentEditableSupport = function()t{ 

return(document .getElementByld("edit profile Link").contentEditable != null) 
}; 





if(hasContentEditableSupport())t 
$("#edit profile link").hidel(); 
Var status = $("#status"); 
$("span[contenteditable]").blur(function()t{ 
Var field = $(this).attr("1id"); 
var value $(this).text(); 


Vvvvvyv 


Var resourceURL = $(this).closest("ul").attr("dgata-urt"); 


$.ajax({ 
url: resourceURL, 
dataType: "]son", 
method: "PUT", 
data: field + "=" + Value, 
success: function(data)t 
status.html ("The record was saved."); 
}3 
error: function(data)t{ 
status.html ("The record failed to save."); 
} 
1 


} 
> } 











经 过 这 番 处 理 , 用 户 就 能 够 采用 标准 界面 方案 或 是 更 快捷 的 就 地 编辑 方案 。 记 住 要 实现 回 退 
表单 界面 , 否则, 不 支持 contenteditable 属 性 的 浏览 大 将 忽略 该 属性 ( 虽然 这 些 浏览 硕 可 能 
持 许 多 其 他 HTML5 特 性 )， 导 致 用 户 无 法 使 用 你 的 网 站 。 





3.6 ”未 来 展望 


现在 , 如 采 添 加 一 个 基于 JavaScript 实 现 的 日 期 选择 希 到 网 站 中 , 用 户 将 不 得 不 去 了 解 如 何 使 
用 它 。 如 采 你 在 网 上 天 过 飞机 票 或 预定 过 酒店 , 可 能 对 相关 网 站 上 上 定义 表单 控件 的 不 同 实现 方 
式 深 有 感触 。 这 就 好 比 使 用 自动 柜员 机 ， 界 面 的 普 裔 差异 性 足以 让 你 尝 头 转向 。 


然而 ， 想 象 一 下 ， 如 果 每 个 站 点 都 使 用 HTML5 日 期 字段 ， 浏 览 器 就 不 得 不 实现 HTML5 日 期 
字段 界面 功能 。 用 户 访问 的 每 个 站 点 都 将 显示 完全 一 样 的 日 期 选择 器 。 屏 幕 阅读 器 软件 甚至 可 以 
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实现 一 个 标准 方法 以 帮助 育 人 更 方便 地 输入 日 期 。 本 章 我 们 介绍 了 不 少 新 的 表单 字段 , 但 并 未 涉 
及 全 部 。 我 们 还 可 以 使 用 search 类 型 来 实现 搜索 框 字 段 , 使 用 tel 类 型 实现 电话 号 码 字 段 ,使 用 
time 类 型 和 datetime 类 型 分 别 实现 时 间 及 日 期 字段 。 所 有 的 这 些 字 段 类 型 都 可 以 为 访问 者 呈现 
特定 的 用 户 界面 ， 这 些 界面 描述 的 内 容 比 老式 的 文本 类 型 要 好 得 多 。 

现在 来 思考 一 下 , 一 旦 占 位 文本 以 及 目 动 聚焦 功能 普及 开 来 ,将 为 用 户 带 来 哪些 益处 。 占 位 
文本 功能 可 以 帮助 屏幕 阅读 佛 问 用 户 解 释 表 单字 段 是 如 何 工 作 的 , 目 动 聚焦 功能 能 够 让 用 户 无 需 
鼠标 轻松 定位 ， 这 些 功 能 将 为 育 人 以 及 因 运 动 障 但 而 无 法 使 用 鼠标 的 用 户 带 来 福音 。 

-日 更 多 的 浏览 吉 文 持 内 置 验证 功能 , 用 户 将 享受 到 蜂 浏 览 硕 的 一 致 性 体验 ; 出 错 信 息 将 会 
一 致 ， 用 户 也 就 不 用 到 处 查找 出 错 的 地 方 。 

转化 元 素 为 可 编辑 区 域 的 功能 使 得 就 地 编辑 变 得 简单 ,但 这 可 能 会 改变 我 们 为 内 容 管 理 系统 
创建 界面 的 方式 。 

现代 Web 技 术 目 始 至 终 讲 究 交 互 性 , 而 表单 是 交互 实现 的 基本 部 分 。 HTML5 的 增强 特性 为 我 
们 提供 了 一 套 全 新 的 工具 ， 通 过 它 我 们 可 以 为 用 户 做 更 多 的 事情 。 






































设置 内 容 及 弄 面 的 样式 


长 久 以 来 , 开发 者 们 不 断 探索 代码 所 需 的 CSS 魔 法 效果 。 我 们 经 常 需 要 借助 JavaScript 或 服务 
希 端 代码 实现 表格 行 颜色 交 蔡 功 能 ,或 者 设置 表单 聚焦 和 模糊 效果 。 我 们 不 得 不 为 了 标识 需要 议 
置 样式 的 S0 个 表单 输入 字段 ， 添 加 额外 的 cLass 属 性 ， 导 致 标签 被 搞 得 乱 七 八 精 。 

这 些 都 将 成 为 历史 ! CSS3 拥 有 强大 的 选择 需 来 处 理 这 些 琐 伴 的 任务 。 一 个 选择 融 就 是 一 种 
模式 ， 你 可 以 借助 选择 需 在 HTML 文 档 中 找到 所 需 元 率 ， 以 给 这 些 元 率 设 置 样式 。 接 下 来 ,我们 
将 使 用 这 些 新 的 选择 需 设 置 表 格 样式 。 之 后 ， 看 一 下 如 何 通过 其 他 一 些 CSS3 特 性 来 改进 网 站 的 
打印 样式 表 ， 并 将 内 容 分 割 到 多 个 列 中 。 


本 章 介 绍 的 CSS 特 性 如 下 所 示 。 


口 :nth-of-type (p:nth-of-type(2n+1){color: red;}): 找 出 某 种 类 型 的 所 有 7 个 元 
过 (C2、F3.5、S3、IE9、0O9.5、iOS3、A2)。 

口 :first-child (p:first-child{color:blue;}): 找 出 第 一 个 元 素 (C2、F3.5、S 3、 
IE9、 O09.5、i10S3、A2), 

D :nth-child (p:nth-child(2n+1){color: red;}): 顺序 计数 ， 找 出 特定 的 一 个 子 元 
率 (C2、F3.3S、S3、IE9、09.$、iOS3、A2 )。 

D :Last-child(p:last-child{color:blue;}): 找 出 最 后 一 个 子 元 素 (C2、F3.5、S3、 
IE9、 O09.5、 10S3、A2), 

口 :nth-last-child (p:nth-last-child(2){color: red;} ): 向 前 计数 ， 找 出 特定 的 
一 个 子 元 素 (C2、F3.5、S3、IE9、0O09.5、iOS3、A2), 

口 :first-of-type (p:first-of-type{color:blue;}): 找 出 给 定 类 型 的 第 一 个 元 素 (C 
2、F3.5、S3、 IE9、0O09.5、iOS3、A2), 

口 :last-of-type(p:last-of-type{color:blue;}): 找 出 给 定 类 型 的 最 好 一 个 元 素 (C 
2、F3.5、S3、 IE9、0O09.5、iOS3、A2) 

口 分 栏 特性 (#content{ column-count: 2; column-gap: 20px; column-rule: 1px 
solid #ddccb5;} ): 将 内 容 分 割 到 多 个 列 中 (C2、F3.5、S3、O11.1、 iO0S3、A2)。 
Di:after (span.weight:after { content: "lbs"; color: #bbb; }): 使 用 content 

在 特定 元 素 后 面 插入 内 容 (C2、F3.5、S3、 IE8、09.5、i0S3、A2) 
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口 媒体 查询 特性 ( media="only all and (max-width: 480)" ): 基于 设备 设 定 ， 应 用 样 
式 (C3、F3.3、S4、 了 下 9、0O 10.1、iOS3、A2 )。 


4.1 实例 10: 使 用 盆 类 设置 表格 样式 


CSS 中 的 伪 类 ， 提 供 了 一 种 基于 文档 之 外 的 或 无 法 被 普通 选择 器 表达 的 信息 来 选择 元 素 的 方 
式 。 你 应 该 已 经 使 用 过 一 些 伪 类 了 , 比如 在 鼠标 悬 停 在 链接 上 时 , 使 用 :hover 改 变 其 颜色 。CSS3 
提供 了 一 些 新 的 伪 类 ， 以 方便 元 素 定 位 操作 。 

AwesomeCo 公 司 使 用 第 三 方 账 务 系统 来 管理 其 运输 的 产品 。 如 你 所 知 ， 会 议 用 品 ， 诸 如 笔 、 
人 茶杯 .衬衫 以 及 其 他 一 些 你 可 以 打上 商标 的 东西 ,是 AwesomeCo 公 司 最 大 的 业务 市 场 .AwesomeCo 
公司 布 望 发 赁 清单 页 面 更 具 可 谈 性 。 眼 下 ， 开 发 者 提供 了 一 个 标准 的 HTML 表 格 ， 如 图 4-1 所 示 。 


人 in | Price [Ovantity| Tal 


图 4-1 ”当前 的 发 货 清单 是 一 个 未 设置 样式 的 表格 
这 是 一 张 相 当 标 准 的 发 负 消 单 ， 里面 包含 了 单价 、 数 量 、 行 总 计 、 分 类 小 计 、 运 费 以 及 发 负 
单 总 计 等 内 容 。 如 果 间 隔行 为 不 同 颜色 , 那么 这 张 表 单 就 会 更 易 读 。 同 样 ， 用 不 同 闫 色 标 识 发 代 
单 总 计 以 使 其 更 加 突出 ， 也 不 失 为 一 个 好 主意 。 


处 理 表格 的 代码 如 下 所 示 ， 可 以 复制 并 运行 它 。 
















































css3_advanced selectors/index.html 
<table > 
<tr> 
<th>Item</th> 
<th>Price</th> 
<th>Quantity</th> 
<th>Total</th> 
</tr> 
<tr> 
<td>Coffee mug</td> 
<td>$10 .00</td> 
<td>5</td> 
<td>$50 ,00< /td> 
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</tr> 

<tr> 
<td>Polo shirt</td> 
<td>$20 .00</td> 
<td>5</td> 
<td>$100.00</td> 

</tr> 

<tr> 
<td>Red stapler</td> 
<td>$9 .00</td> 
<td>4</td> 
<td>$36.00</td> 

</tr> 

<tr> 
<td colspan="3">Subtotal</td> 
<td>$186.00</td> 

</tr> 

<tr> 
<td colspan="3">Shipping</td> 
<td>$12.00</td> 

</tr> 

<tr> 
<td colspan="3">Total Due</td> 
<td>$198.00</td> 

</tr> 

</table> 


首先 ， 移 除 丑 陋 的 表格 边框 。 创 建 一 个 stylesheets/style.css 文 件 ， 并 在 HTML 文 件 里 引用 它 。 





css3 advanced selectors/index.html 


<link rel="styliesheet" href="stylesheets/style.css"> 


css3_advanced_ selectors/stylesheets/style.css 


tablef{ 
border-collapse: collapse; 
width: 600px; 

} 


th, td{ border: none; } 


此 外 ,设置 表 头 栏 为 黑色 背景 加 日 色 文本 。 








css3_advanced_ selectors/stylesheets/style.css 


th{ 
background-color: #000, 
color: #fff; 

} 


应 用 了 样式 后 ， 表 格 效 果 如 图 4-2 所 示 。 
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Item Price Quantity Total 
Coffee mug $10.00 5 $50.00 
Polo shirt $20.00 5 $100.00 
Red stapler $9.00 4 $36.00 
Subtotal $186.00 
Shipping $12.00 
Total Due $198.00 
图 4-2 


清除 了 表格 的 边框 及 空 晶 之后, 我 们 可 以 使 用 伪 类 来 给 行 和 列 单独 设置 样式 。 先 来 给 表格 行 


设置 条 纹 。 


4.1.1 使 用 :nth-of-type 给 表格 行 设置 条 纹 


我 们 都 见 过 表格 的 “斑马 纹 ” 效 果 。 这 种 效果 非常 有 用 , 它 能 够 让 我 们 的 视 沉 你 持 在 水 平 线 
上 。 这 种 表现 层 的 样式 设置 是 CSS 最 拿手 的 任务 。 以 前 要 设置 表格 的 “斑马 纹 ” 效 末 ， 就 必须 和 多 
给 表格 行 添加 附加 类 名 ， 诸 如 odd ( 奇数 )、even (偶数 ) 之 类 的 。HITML5 规 范 不 救 励 我们 使 用 
类 名 来 定义 表现 内 容 ， 因此, 我们 并 不 希望 因为 采用 了 这 种 方式 而 破坏 表格 的 标记 结构 。 通 过 使 
用 一 些 HIMLS 中 引入 的 新 的 选择 融 ， 我 们 可 以 在 避免 改变 标记 结构 的 情况 下 ， 达 成 我 们 的 目的 ， 
真正 实现 表现 与 内 容 分 离 的 效 宋 。 


nth-of-type 选 择 表 通过 一 个 公式 或 关键 字 ， 来 找 出 特定 类 型 的 所 有 7 个 元 系 。 我 们 很 快 会 
看 到 公式 的 具体 应 用 。 不 过 ， 让 我 们 先 来 了 解 一 下 关键 子 的 使 用 ， 因 为 它 比 较 容易 掌握 。 

我 们 希望 相 邻 行 有 不 同 的 颜色 , 最 简单 的 方式 就 是 找 出 所 有 的 偶数 行 , 然后 设置 它们 的 背景 颜 
色 。 之 后 ， 再 对 所 有 的 奇数 行 做 相同 的 处 理 。CSS3 针 对 这 种 具体 场景 ， 提 供 了 even 和 odd 关 键 字 。 









































css3_advanced_ selectors/stylesheets/style.css 

tr:nth-of-type (even)t 
background-color: #F3F3F3; 

} 

tr:nth-of-type(odd) { 
background-color:#ddd; 

} 


上 述 代 码 中 ， 选 择 带 的 意思 是 :“ 带 我 找 出 每 个 偶数 行 ， 并 给 这 些 行 设置 颜色 。 然 后 再 找 出 
所 有 的 奇效 行 ， 也 给 它们 设置 颜色 。 这 种 方式 不 用 依赖 脚本 处 理 ， 也 不 用 给 表格 行 添 加 额外 的 
类 名 ， 就 可 以 实现 表格 的 “斑马 纹 ” 效 采 。 


应 用 了 样式 后 ， 我 们 的 表格 如 图 4-3 所 示 。 
接 下 来 ,我们 来 调整 表格 列 的 内 容 对 齐 。 
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Item Price Quantity Total 
Coffee mug $10.00 5 $50.00 
Polo shirt $20.00 5 $100.00 
Red stapler $9.00 4 $36.00 
Subtotal $186.00 
Shipping $12.00 
Total Due $198.00 
图 4-3 


4.1.2 ”使 用 :nth-chitLd 对 齐 表格 列 的 内 容 


默认 情况 下 , 发 贷 清 单 表 里 的 所 有 列 都 是 左 对 齐 的 , 我 们 要 对 第 一 列 以 外 的 其 他 所 有 列 的 内 
容 设置 右 对 齐 。 这 样 ，Price ( 价格 ) 列 以 及 Quantity (数量 ) 列 的 内 容 都 将 右 对 齐 以 方便 阅读 。 
要 设置 右 对 齐 ， 我 们 可 以 使 用 nth-chitLd 选 择 器 ， 首 先 我 们 来 了 解 它 是 如 何 工 作 的 。 

nth- chitLd 选 择 器 查找 某 个 元 素 的 子 元 素 ， 和 nth-of-type 选 择 器 一 样 ， 也 可 以 使 用 关键 字 
到 大修 信也。 

公式 的 形式 是 an+fb，a 是 个 倍数 ，n 是 以 0 开始 算 起 的 计数 答 ， 而 b 是 偶 移 量 。 在 缺乏 上 下 文 
环境 的 情况 下 ， 是 很 难 理解 这 种 朱 述 的 。 因 此 ,， 接 下 来 我 们 把 nth- chitLd 选 择 器 放 到 表格 的 上 下 
文 环 境 中 加 以 描述 。 

如 有 果 打 算 选 择 表格 所 有 行 ， 我们 可 以 这 么 做 。 

table tr:nth-child(n) 

不 使 用 倍数 ， 也 不 需要 偏 移 量 。 

然而 ， 如 果 这 时 候 我 们 想 获取 除 第 一 行 ( 该 行 包含 栏目 标题 ) 以 外 的 所 有 行 ， 这 种 情况 下 ， 
将 使 用 市 侦 移 量 的 选择 需 。 

table tr:nth-child(n+2) 

计数 器 是 从 0 开始 计算 的 , 在 这 里 偏 移 量 为 2, 意思 是 不 从 表格 第 一 行 开始 计算 ,而 是 从 第 二 
行 开始 算 起 。 

如 采 我 们 想 隅 行 选 择 表 格 行 ， 则 需要 用 到 倍数 2， 即 2n。 

table tr:nth-child(2n) 

如 采 要 每 隔 两 行 选择 一 行 ， 则 使 用 3n。 

你 也 可 以 使 用 偶 移 量 ， 以 便 辐 前 选择 表格 行 。 下 面 的 公式 将 找 出 从 第 四 行 开始 的 相隔 行 。 

table tr:nth-child(2n+4) 


因此 ， 根 据 以 上 说 明 ， 我 们 可 以 使 用 以 下 规则 右 对 齐 第 一 列 以 外 的 所 有 列 。 
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css3_advanced_ selectors/stylesheets/style.css 

td:nth-child(n+2), th:nth-child(n+2)1+ 
text-align: right; 

} 


我 们 使 用 由 去 号 隅 开 的 两 个 选择 占 ， 以 同时 设置 <th> 和 <td> 的 样式 。 
至 此 ， 我 们 的 表格 样式 就 基本 设置 完成 。 





Item Price Quantity Tots 
Coffee mug $10.00 . $50.00 
Polo shirt $20.00 3 $100.00 
Red stapler $9.00 一 $36.00 
Subtotal $186.00 
Shipping $12.00 
Total Due $198.00 
图 4-4 





接 下 来 ， 让 我 们 来 调整 表格 最 后 一 行 的 样式 。 


4.1.3 ”使 用 :Last-chiLd 加 粗 表 格 最 后 一 


现在 的 发 赁 清单 看 起 来 已 经 很 深 亮 了 , 但 某 位 经 理 希 望 表 格 底 栏 加 粗 以 突出 显示 。 我 们 可 以 
使 用 Last-chitLd 选 择 需 完成 这 ii tlast-child 获 取 元 到 组 中 的 最 后 一 个 子 元 系 。 


对 Web 开 发 者 而 言 ， 给 段落 应 用 一 个 下 边 距 以 使 其 间距 均匀 地 分 布 ， 是 一 个 通用 的 做 法 。 这 
种 方式 会 导致 元 素 组 的 最 后 一 个 元 素 产 生 和 额外 的 下 边 距 。 例如 ,如 果 段 落 恰 好 位 于 一 个 侧 边 栏 或 
标注 框 里 面 时 , 我 们 可 能 想 要 移 除 最 后 一 个 段落 的 下 边 距 , 以 使 最 后 一 个 段落 的 底部 与 侧 边 栏 或 
标注 框 的 边框 间 没 有 多 余 的 间隔 。Last-chiLd 选 择 器 很 适合 用 于 处 理 这 样 的 场景 。 我 们 可 以 用 
Last-chiLd 选 择 融 来 移 除 最 后 一 个 段 洛 的 下 边 距 。 


p{ margin-bottom: 20px } 
#sidebar p:last-child{ margin-bottom: 0; } 


我 们 采用 同样 的 方式 来 加 粗 最 后 一 行 的 内 容 。 






































css3_advanced selectors/stylesheets/style.css 
tr:last-childt{ 

font-weight: bolder.; 
} 


接 下 来 ， 对 表格 最 后 一 列 做 同样 处 理 。 这 也 将 突出 显示 “总 计 ” 一 





css3_advanced selectors/stylesheets/style.css 
td:last-childt{ 

font-weight: bolder.; 
} 
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最 后 ， 我 们 结合 使 用 Last-chiltd 和 后 代 选 择 希 ， 以 设置 总 计 金 额 的 字体 ， 证 其 看 起 来 更 大 
一 些 。 找 出 最 后 一 行 的 最 后 一 列 ， 并 按 如 下 方式 设置 其 样式 。 





css3_advanced_ selectors/stylesheets/style.css 


tr:last-child td:last-child{ 
font-size:24px; 





} 

Item Price Quantity Total 
Coffee mug $10.00 5 $50.00 
Polo shirt $20.00 3 $100.00 
Red stapler $9.00 4 $36.00 
Subtotal $186.00 
Shipping $12.00 
Total Due $198 .00 

图 4-5 





如 图 4-5 所 示 ， 我 们 离 成 功 只 差 一 步 了 。 接 下 来 ,还 需要 继续 对 表格 的 最 后 三 行 做 些 改进 。 





4.1.4 使 用 :nth-Last-chiLd 反 向 遍历 元 素 


我 们 想 让 表格 中 的 “Shipping”( 运费 ) 行 在 运费 打折 时 高 亮 显示 。 可 以 使 用 nth-Last-chitLd 
快速 定位 到 该 行 。 你 在 4.1.2 方 中 已 经 明白 了 怎样 使 用 nth-child 和 an+b 公 式 来 选择 特定 子 元 素 。 
nth-Last-child 选 择 器 的 工作 原理 跟 nth-child 差 不 多 ， 只 不 过 它 是 反 向 遍历 子 元 素 ， 以 最 后 
一 个 子 元 素 为 起 点 。 这 使 得 该 选择 顺 很 容易 获取 元 素 组 中 的 倒数 第 二 个 元 素 。 这 正 是 此 时 处 理发 
贷 清单 表 所 需要 的 功能 。 


因此 ， 要 找到 “Shipping” 行 ， 我 们 需要 编写 以 下 代码 : 




















css3_advanced selectors/stylesheets/style.css 
tr:nth-last-child(2)1{ 
color: green; 


} 

这 里 ， 我 们 选 定 了 特定 子 元 素 ， 即 倒数 第 二 个 子 元 素 。 

然而 , 还 有 一 件 事 需 要 人 处理 。 早 先 我 们 右 对 齐 了 除 第 一 列 以 外 的 所 有 列 ， 尺 管用 于 描述 条 日 
内 容 及 价格 的 表格 行 看 起 来 还 不 错 ， 却 让 表格 的 最 后 三 行 看 起 来 有 点 奇怪 。 接 下 来 ,我 们 也 将 底 
部 三 行 的 条 目 列 右 对 齐 。 可 以 通过 使 用 nth-tast-chitd， 并 在 公式 中 传人 负 的 n 值 及 正 的 b 值 偏 
移 量 ,代码 如 下 所 示 。 

















css3_advanced selectors/stylesheets/style.css 

tr:nth-last-child(-n+3) td{ 
text-align: right; 

} 
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你 可 以 把 它 当 作 一 个 范围 选择 需 ; 公式 使 用 了 偏 移 量 3， 由 于 我 们 用 的 是 nth-last-child， 
因此 ,公式 的 效果 就 是 获取 表格 底部 位 置 、 偏 移 量 范围 之 内 的 每 个 元 素 ( 依次 按 倒数 第 三 个 元 素 
到 最 后 一 个 元 素 的 顺序 选择 )，、 如 果 使 用 nth-child 的 话 ， 就 将 获取 表格 顶部 位 置 、 偏 移 量 范围 
之 内 的 每 个 元 素 (依次 按 第 三 个 元 素 到 第 一 个 元 素 的 顺序 选择 )。 

新 样式 的 表格 (如 图 4-6 所 示 ) 看 起 来 好 看 多 了 ， 而 且 无 需 改变 任何 基本 标记 。 


和 




















Coffee mug $10.00 $50.00 
Polo shirt $20.00 = $100.00 
Red stapler $9.00 4 $36.00 
Subtotal $186.00 

Shipping $12.00 

Total Due $198.00 








图 4-6 设置 好 样式 的 表格 ， 完 全 使 用 CSS3 来 实现 隔行 着 色 和 对 齐 效 来 


我 们 在 这 里 用 来 完成 任务 的 很 多 选择 器 ， 在 下 ( 老 版 本 ) 下 是 得 不 到 支持 的 ， 因此， 需要 找 
到 一 个 解决 方案 。 





4.1.5” 回 退 方案 

当前 版 本 的 了 下、Opera、Firefox 、Safari 以 及 Chrome 完 全 理解 这 些 选 择 售 ， 但 IE 8 及 更 早 版 本 
的 JE 将 完全 忽略 它们 。 你 需要 一 个 恨 好 的 回 退 方案 来 解决 这 个 问题 。 就 此 ， 你 可 以 做 个 选择 。 

1. 什么 都 不 做 

最 简单 的 回 退 方案 就 是 什么 都 不 做 。 即 使 没有 我 们 提供 的 额外 样式 设置 ,内容 也 是 完全 可 读 
的 ， 因 此 ， 我 们 可 以 不 考虑 IE 8 用 户 。 当 然 ， 如 果 什 么 都 不 做 对 你 而 言 并 不 是 一 个 好 的 办 法 ， 还 
有 其 他 技术 可 供 选 择 。 

2. 改动 HTML 代 码 

能 在 各 种 浏览 厚 下 恨 好 运行 的 大 多 数 篆 见 的 解决 方案 都 要 改动 基本 代码 。 你 可 以 给 表格 里 的 
所 有 单元 格 设置 类 属性 ， 并 给 每 个 类 应 用 基本 CSS。 这 是 最 坏 的 选择 ， 因 为 它 混用 了 展示 代码 及 
内 容 ， 而 这 正 是 我 们 使 用 CSS3 时 要 极力 避免 的 情况 。 如 果 有 一 天 我 们 不 再 需要 所 有 的 额外 标记 
了 ， 移 除 这 些 类 属性 也 将 是 非常 痛苦 的 事情 。 

3. 使 用 Selectivizr 库 

jQuery 库 已 经 能 够 理解 我 们 使 用 的 大 多 数 CSS3 选 择 器 ,这 样 的 话 , 可 以 考虑 快速 编写 一 个 用 
来 给 表格 设置 样式 的 方法 。 但 这 还 不 是 最 容易 实现 的 方案 。 

Keith Clark 编 写 了 一 个 很 好 的 第 三 方 库 , 叫 作 Selectivizr， 为 下 浏览 器 添加 CSS3 选 择 器 支持 。? 
我 们 只 需 把 它 添 加 到 页 面 中 就 可 以 了 。 
































GD http://selectivizr.com/ 
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Selectivizr 库 可 以 在 jQuery、Prototype 或 其 他 一 些 库 中 结合 使 用 ,但 jQuery 支持 我 们 在 这 里 用 
到 的 所 有 伪 类 。 

要 使 用 Selectivizr 库 ， 下 载 它 并 在 HIML 文 档 <head> 位 置 添加 引用 链接 。 由 于 其 只 适用 于 匡 
浏 览 郁 ， 因 此 ， 我 们 需要 将 此 引用 链接 放置 在 一 个 条 件 注 释 中 ， 这 样 上 共有 下 用 户 才 会 加 载 
Selectivizr 库 。 








css3_advanced selectors/index.html 
<script 
src='http://aljax.googleapis. com/aljax/ Libs/Jjquery/1.9.1/j9uery.min.]s'> 
</script> 
<!--[if (gte IE 5.5)& (lte IE 8)]> 
<sScCript src="Jjavascripts/selectivizr-min.ijs'"></script> 
<lfendifl--> 


注意 在 这 里 也 加 载 J 了 jQuery 库 , 在 这 种 特殊 情况 下 , 要 在 文档 <head> 位 置 添加 jQuery 的 引用 。 
考虑 到 页 面 还 有 可 能 在 非 耻 浏览 硕 中 打开 ， 所 以 最 好 不 要 在 条 件 注 释 里 添加 jQuery 引用 。 


随 着 回 退 方案 的 实现 ， 表 格 在 下 下 也 能 很 好 地 显示 了 ， 如 图 4-7 所 示 。 




















加 喧 碟 Tabe 从 - 园 -二 
Quantity 

Coffee mug $10.00 5 $50.00 
Polo shirt $20.00 3 $100.00 
Red stapler $9.00 + $36.00 
Subtotal $186.00 

Shipping $12.00 

Total Due $198.00 





图 4-7 表格 在 下 浏览 絮 下 显示 良好 
虽然 这 个 方案 需要 用 户 开 局 JavaScript 支 持 ， 但 这 里 的 表格 样式 主要 是 为 了 让 内 容 便于 浏览 。 
正如 前 面 我 们 讨论 的 ， 缺 少 样式 并 不 会 影响 用 户 读 取 发 贷 清单 表格 数据 。 
有 了 高 级 选择 希 的 文 持 ， 设 置 元 素 样 式 就 变 得 非常 容 匈 ， 特 别 是 在 未 被 允许 修改 HTML 代 但 
的 情况 下 ( 如 出 于 使 用 框架 、 打 包产 品 或 办 公 室 政治 等 原因 )。 设 置 界面 样式 时 ， 应 优先 考虑 语义 
分 层 并 采用 新 式 选 择 带 ,并 尽量 避 倪 引入 额外 标记 。 这样 一 来 ,你 会 发 现代 码 维护 变 得 容易 许多 。 
也 可 以 通过 CSS 添 加 内 容 到 Web 页 面 ， 接 下 来 将 就 此 展开 谈论 。 




















4.2 ”实例 11: 使 用 :after 和 content 生成 打印 友好 的 链接 


CSS 不 仅 可 以 设置 存在 元 素 的 样式 ， 也 能 够 通过 : before 与 :after 伪 元 素 ， 以 及 content 属 
性 向 文档 中 注入 内 容 。 在 有 些 业 务 场景 中 ， 都 可 以 通过 CSS 来 生成 内 容 ， 最 典型 的 莫 过 于 当 用 户 
打印 页 面 时 , 在 链接 文本 的 后 面 妃 加 相应 的 URL 地 址 。 当 你 在 屏幕 上 浏览 文档 时 ,就 可 以 在 链接 
二 方 悬 停 鼠 标 , 同时 观察 状态 栏 就 能 够 获悉 这 个 链接 的 日 的 地 。, 然而, 如 果 你 看 的 是 页 面 打印 稿 ， 
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就 无 从 得 知 这 个 链接 到 底 是 通 往 何 处 的 。 

AwesomeCo 公 司 正在 开发 一 个 新 的 策略 页 面 ,改版 小 组 的 一 位 成 员 坚 持 要 求 在 每 次 小 组 会 议 
时 打印 出 页 面 副 本 。 他 和 希望 获悉 页 面 上 所 有 的 链接 地 址 ， 以 便 敲 定 是 否 需 要 更 改 。 只 和 需 通 过 少量 
CSS 人 代码， 就 可 以 添加 上 这 个 功能 ， 并 且 它 能 够 在 下 8、Firefox 、Safari 以 及 Chrome 等 各 个 浏览 春 
上 正常 运行 。 


现在 的 页 面 只 有 一 个 链接 列表 ， 最 终 ， 我 们 会 将 其 开发 成 一 个 完整 的 示例 。 




















css3_print_links/index.html 
<UL> 
<11> 
<a href="travel/ingdex.html">Iravel Authorization Form</a> 
</11i> 
<1i> 
<a href="travel/expenses.htmi">Travel Reimbursement Form</a> 
</1i> 
<11> 
<a href="travel/guidelines.html">TIravel Guidelines</a> 
</1i> 
</ul> 


</body> 

如 果 你 观察 这 个 页 面 的 打印 稿 ， 会 看 到 链接 的 文本 ， 并 之 有 下 划 线 ,但 你 无 法 知道 这 些 链接 
究 葛 去 同 何 处 。 接 下 来 ,我们 来 改进 这 个 功能 。 
4.2.1 创建 只 适用 于 打印 的 样式 表 


当 我 们 给 页 面 添加 样式 表 时 ， 可 以 指定 样式 要 应 用 的 媒体 类 型 。 大 多 数 情 部 下， 我 们 使 用 
screen 类 型 。 然 而 ,我 们 还 可 以 使 用 print 类 型 来 定义 一 个 只 在 页 面 打 印 (或 者 用 户 使 用 打印 预 
览 功能 ) 时 才 加 载 的 样式 表 。 





css3_print_links/index.html 


<link rel="stylesheet" href="print.css" type="text/css" media="print"> 


用 这 个 简单 的 规则 创建 一 个 print.css 样 式 表 文件 。 


css3_print_ links/stylesheets/print.css 
a:after { 
content: ”位 attr(href) ")} ",， 
上 
以 上 CSS 代 码 将 在 页 面 的 每 个 链接 文本 后 面 和 都 涩 加 一 对 括号 ， 括 号 里 是 相应 的 链接 地 址 。 用 
一 个 现代 浏览 各 打 印 页 面 时 ， 效 采 如 图 4-8 所 示 。 
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Forms and Policies 


。 Travel Authorization Form (travel/imn dex.htm]) 
。 Travel Reimbursement Form (travel/expenses.html) 
。 Travel Guidelines (travel/euidelines.html) 











图 4-8 


如 果 想 在 不 浪费 纸张 的 情况 下 观察 到 它 的 效果 , 可 以 使 用 浏览 带 的 打印 预览 功能 , 这 同样 会 
触发 应 用 打 纯 样式 表 效 采 。 


版 本 8 及 以 上 的 正 浏 览 硕 神 文 持 以 上 这 种 追加 文档 内 容 的 方式 ， 所 以 无 震 考 愿 回 退 方案 了 。 














4.2.2 ” 双 冒 号 语法 


:before 与 :after 伪 元 素 是 在 CSS2.1 规 范 中 引进 的 。" 在 早期 的 草稿 中 ， 它 们 以 双 冒 号 的 形 
式 出 现 ， 如 : 


a: :aftert{ 
content: ”全 attr(ihref}) "} ". 
} 


这 种 语法 在 许多 浏览 器 中 无 法 得 到 支持 , 因此 ,规范 呼吁 浏览 器 厂商 同时 支持 冒号 及 双 冒 号 
语法 。 

你 也 可 以 在 其 他 方面 应 用 content 属 性 。 比 如 ， 可 以 用 它 来 给 文本 添加 可 视 标 签 。 一 个 普 
的 用 法 就 是 借助 content 属 性 ， 在 通 向 其 他 网 站 的 链接 后 面 添加 “External Link”( 外 部 链接 ) 撒 
述 。 请 注意 不 要 混淆 了 设计 与 内 容 的 界限 。CSS 的 content 属 性 只 应 该 用 于 设计 相关 的 事项 ， 并 
不 注入 实际 的 页 面 内 容 。 

我 们 讨论 了 当 Web 页 面 发 送 给 打印 机 时 ， 如 何 让 页 面 看 起 来 与 众 不 同 。 接 下 来 ， 我 们 来 看 看 
如 何 基于 屏幕 尺寸 来 改变 页 面 内 容 的 外 观 呈 现 。 








4.3 实例 12: 使 用 媒体 查询 构建 移动 页 面 


到 目前 为 止 ， 我 们 已 经 能 定义 特定 媒体 的 样式 表 , 但 一 直 局 限于 具体 输出 类 型 ， 正 如 在 4.2 
节 中 看 到 的 那样 , 只 有 定义 了 打印 样式 表 , 才 可 以 使 用 :after 和 内 容 创建 打印 友好 的 链接 。CSS3 
媒体 查询 功能 可 以 基于 用 户 使 用 的 屏幕 尺寸 改变 页 面 的 呈现 。 ”多 年 来 ，Web 开 发 者 一 直 使 用 
JavaScript 获 取 用 户 屏幕 太 二 信息。 但 从 现在 开始 ， 我 们 可 以 单独 通过 样式 表 来 完成 这 些 事情 了 。 
使 用 媒体 查询 可 以 判定 以 下 内 容 。 


























GD http://www.w3.org/TR/CSS21/generate.html#before-after-content 
@) http://www.w3.org/TR/css3-mediaqueries/ 
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口 分 辨 京 

口 屏 雄 方 同 ( 坚 屏 或 模 屏 模式 ) 

口 设备 锅 度 与 高 度 

口 浏览 厚 和 窗口 宽度 与 高 度 

正 因为 如 此 ， 媒 体 查 询 可 以 很 方便 地 为 各 种 屏幕 尺寸 的 用 户 创 建 可 供 选 择 的 样式 表 ， 同 时 ， 
媒体 查询 还 是 啊 应 式 Web 设 计 的 关键 技术 组 成 部 分 ， 是 创建 网 站 的 流行 技术 ， 可 基于 用 户 屏 医 分 
辨 率 改 变 网 站 呈现 与 流动 。 诸 如 Bootstrap 这 样 的 流行 框架 大 量 依 赖 于 媒体 查询 功能 。* 

















1 小 乔 爱 问 : 
xf ”什么 是 Handheld 媒 体 类 型 ? 


正如 print 媒体 类 型 用 于 打印 机 ，Handheld 媒体 类 型 则 用 于 移动 设备 ， 但 大 多 数 移动 设 
备 都 布 望 展现 一 个 “真实 的 互联 网 ”， 因 此 ， 这 些 设备 往往 会 忽略 其 他 的 媒体 类 型 ， 转 而 采 
用 Screen 媒体 类 型 的 样式 表 。 











事实 证 明 ，AwesomeCo 公 司 的 行政 人 员 最 终 厌 倦 了 来 和 目 客 户 和 员工 的 抱怨 Web 页 面 在 智 
能 手机 上 看 起 来 一 团 烛 。 市 场 总 监 希 望 看 到 2.1 节 中 所 构建 博客 模 厂 的 移动 适 配 版 本 ， 我 们 可 以 
很 快 做 出 一 个 原型 出 来 。 

当前 的 博客 是 两 栏 布局 , 带 有 一 个 主要 内 容 区 域 和 一 个 侧 边 栏 。 要 让 移动 浏 览 需 页 面 更 具 可 
该 性 的 最 简单 的 方式 ， 就 是 移 除 浮动 元 兹 ,让 侧 边栏 沉 到 主要 内 容 下 方 。 这 样 做 能 避免 使 用 者 不 
得 不 横 问 深 动 屏 和 项 。 

这 是 一 个 极其 简单 的 啊 应 式 设计 解决 方案 。 要 应 用 这 种 效果 , 可 在 博客 样式 表 的 底部 添加 以 
下 代码 : 














css3_mediaquery/stylesheets/style.css 


@media only screen and (max-device-width: 480px) { 
body{ width:480px; } 
nav, section, header, footer{ margin: 0 lOpx 9 10px; } 


你 可 以 把 媒体 查询 括 写 中 的 代码 当 作 巡 体 类 型 自己 的 样式 表 ， 当 满足 查询 条 件 时 将 被 调 用 。 








GD http://twitter.github.com/bootstrap/ 
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这 里 重新 调整 了 页 面 body 的 太 寸 ， 并 将 两 栏 布局 转换 成 了 单 栏 布局 。 
我 们 还 可 以 在 链接 到 样式 表 时 使 用 媒体 查询 , 因此 可 以 将 移动 样式 表 放 在 单独 的 文件 里 , 就 
像 这 样 : 
<link rel="stytesheet" type="text/css" 
href="stylesheets/mobile,css" media="only Screen and (max-device-width: 480px)"> 


接 下 来 , 博客 页 面 在 小 屏 上 就 变 得 更 具 可 读 性 ,然而 小 屏幕 的 视 口 仍 可 放大 。 我 们 可 以 通过 
在 Web 页 面 的 <titLe> 标 签 下 方 添加 viewport 标 签 来 解决 这 个 问题 。 











css3_mediaquery/index.html 


<meta name="viewport" 
content="width=device-width, initial-scale=1, maximum-scale=1"> 


图 4-9 显 示 了 当前 的 页 面 样式 。 这 个 样式 远 不 完美 ， 却 是 一 个 民 好 的 开端 。 





AwesomeCo Blog 


192.168.1.2:8000/c: BEC 


AwesomeCo Blog! 
Latest Posts Archives Contributors 
Contact Us 


How Many Should We Put You Down 
For? 


Posted by Brian on October 1st, 2013 at 
2:39PM 


The first big rule in sales is "Never give 

that if the person leaves a ane 
empty-handed, they're likely selling your 

not going to come back. product." 

That's why you have to be 

somewhat aggressive when you're working with a 
customer, but you have to make sure you don't 
overdo it and scare them away. 





图 4-9 ”博客 页 面 在 iPhone 上 的 显示 情况 


可 以 通过 这 种 方式 为 其 他 显示 设备 创建 样式 表 ， 如 查询 设备 、 平 板 电脑 ， 以 使 内 容 在 其 他 平 
全 上 也 能 方便 地 阅读 。 但 是 , 优 抑 考虑 为 大 屏 进行 页 面 内 容 设计 、 之 后 再 试 网 为 小 屏 缩小 页 面 将 
导致 一 系列 问题 。 最 佳 方式 是 “移动 优先 ”， 即 先 为 小 屏 做 设计 ， 然 后 再 为 大 屏 添 加 更 多 的 内 容 。 
这 种 方式 将 促使 你 对 内 容 和 用 户 做 更 全 面 深 入 的 考量 。 











回 退 万 案 
媒体 查询 在 Firefox、Chrome 、Safari、Opera 以 及 IE 9 及 以 上 版 本 中 都 能 得 到 支持 。 考 虑 回 退 





70 第 4 草 设置 内 容 及 界面 的 样式 


方案 时 ,必须 借助 JavaScript 的 回 退 方案 来 加 载 针 对 用 户 设 备 的 附加 样式 表 。 然而 , 在 我 们 的 示例 
中 ， 目 标 设备 是 iPhone， 因 此 不 需要 回 退 方案 (因为 使 用 的 是 Safari 浏 览 需 ) 一 一 即使 在 没有 媒体 
查询 的 情况 下 内 容 仍 具备 一 定 可 读 性 。 


优秀 的 第 三 方 Respond.js 库 支持 min- 和 max-width 媒 体 查 询 ",， 这 对 IE 8 而 言 是 个 极 好 的 回 退 方 
案 , 但 由 于 媒体 查询 对 小 屏 以 及 不 运行 IE 8 的 设备 而 言 是 标准 配置 ,因此 在 很 多 场景 中 ,Respond.js 
库 并 不 一 定 用 得 上 。 也 就 是 说 , 你 仍然 可 以 使 用 媒体 查询 处 理 从 小 屏 显 示 需 到 超大 墙 体 显示 需 等 
各 种 屏幕 尺寸 上 的 呈现 。 


媒体 查询 功能 让 我 们 拥有 了 控制 页 面 在 各 种 屏 偶 尺寸 上 显示 的 强大 能 力 ,但 有 时 在 大 屏 上 的 
内 容 显示 区 域 确实 太 宽 了 ， 接 下 来 ,我们 会 讨论 如 何 把 这 些 内 容 区 域 分 割 成 多 栏 。 
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印刷 业 使 用 多 栏 排版 有 些 年 凑 了 ，Web 开 发 者 一 直 很 问 往 多 栏 排版 样式 。 罕 细 的 多 栏 使 得 内 
容 更 易 阅 读 ， 而 且 随 者 显示 带 变 得 越 来 越 完 ， 开 发 者 也 在 不 断 探 过 保持 舒适 列 宽 的 方式 。 毕 苋 ， 
人 们 阅读 横路 整个 报纸 页 面 的 单行 文本 内 容 已 经 够 吃力 了 , 如果 是 模 跨 整个 显示 带 的 多 行文 本 仅 
怕 就 更 难受 了 。 在 过 去 十 年 里 有 过 不 少 巧 妙 的 解决 方 宁 ， 但 部 不 如 CSS3 规 范 提 供 的 解决 方案 来 
得 简单 明了 。 





4.4.1 ” 拆 分 栏 


每 个 月 AwesomeCo 公 司 都 要 给 员工 发 布 一 份 答 讯 。 该 公司 使 用 一 个 流行 的 基于 Web 的 电子 邮 
件 系统 来 处 理 此 事 。 通 过 电子 邮件 来 发 布 向 讯 并 不 是 一 个 非常 好 的 方式 ， 并 且 难 以 管理 。 因 此 ， 
公司 决定 把 简讯 放 到 内 部 网 站 上 ,并 把 简讯 信息 的 链接 地 址 通过 邮件 发 送 给 员工 , 员工 可 以 点 击 
链接 并 在 浏览 带 中 打开 简讯 页 面 浏览 相关 信息 。 简 讯 页 面 的 模型 如 图 4-10 所 示 。 


新 来 的 传媒 总 监 有 印刷 出 版 行业 的 背景 ,她 决定 将 简讯 Web 页 面 由 一 栏 改 为 两 位 ,使 其 更 贴 
近 纸 版 向 讯 信息 的 风格 。 


如 条 你 曾 试 图 使 用 div 和 泽 动 来 分 割 文本 内 容 到 多 栏 中 ， 就 会 知道 这 有 多 难 ! 第 一 个 大 障碍 
就 是 确定 在 何 处 分 割 文 本 。 在 一 些 排版 设计 软件 ( 如 InDesign ) 中 ， 可 以 把 各 个 文本 框 链 接 在 一 
起 ,这 样 在 填充 文本 时 ,文本 内 容 就 可 以 流畅 地 填 入 链接 好 的 文本 区 域 。 日 前 在 Web 领 域 还 没有 
一 个 类 似 的 人 处理 方式 , 但 现在 我 们 终于 有 一 个 运作 良好 并 易于 使 用 的 方案 了 。 我们 可 以 分 割 某 个 
元 素 的 内 容 到 多 栏 中 ， 其 中 每 一 栏 的 宽度 相同 。 




















GD https://github.com/scottjehl/Respond 
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AwesomeCo Newsletter 


Volume 3, Issue 12 


News From The Director 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 


co Being Awesome 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


. . "Lorem ipsum dolor sit amet, 
Quick Bits of Awesome consectetur adipisicing elit, sed 


do eiusmod tempor incididunt 
ut labore et dolore magna 
aliqua. Ut enim ad minim 
veniam." 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


Birthdays 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum. 





Send newsworthy things to news@awesomeco.com. 


图 4-10 ” 单 栏 的 简讯 页 面 难以 阅读 ， 因 为 它 实在 太守 了 


我 们 从 简讯 页 面 的 标记 着 手 。 这 是 个 相当 简单 的 HTML 代 码 。 由 于 页 面 元 素 中 的 内 容 将 随 着 
最 新 简讯 信息 的 写 入 而 变化 ， 因 此 ， 先 用 占 位 符 文本 来 代表 实际 内 容 。 

















css3 _ columns/condensed newsletter.html 
<body> 
<div id="container"> 
<header id="header'"> 
<hl>AwesomeCo Newsletter</hl1> 
<p>Volume 3, Issue 12</p> 
</header> 
<section id="newsletter"> 
<article id="director news"> 
<header> 
<h2>News From The Director</h2> 
</header> 
<div> 
<p> 
Lorem ipsum dolor sit amet. 
</p> 
<aside class="callout"> 
<h4>Being Awesome</h4> 
<p> 
&quot;Lorem ipsum dolor sit amet, ....&quot,; 
</p> 
</aside> 
<p> 
Duis aute irure dolor in 
</p> 
</div> 
</article> 
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<article id="awesome bits"> 
<header> 
<h2>Quick Bits of Awesome</h2> 
</header> 
<div> 
<p> 
Lorem ipsum dolor sit amet... 
</p> 
</div> 
</article> 
<article id="birthdays"> 
<header> 
<h2>Birthdays</h2> 
</header> 
<div> 


</article> 
</section> 
<footer id="footer"> 
<h6> 
Send newsworthy things to 
<a href="mailto:news@aweseomco,. com">News@Qawesomeco .com</a>. 
</hé6> 
</footer> 
</div> 
</body> 


要 分 割 元 系 内 容 为 两 栏 布局 ， 需 要 在 样式 表 中 添加 一 些 新 的 属性 。 


D coLumn-count: 指定 使 用 多 少 栏 ( 列 ) 来 分 割 内 容 
口 cotumn-gap: 指定 相 邻 两 栏 之 间 间 隅 多 少 空格 
口 cotumn- ruLe: 在 相 邻 两 栏 间 添加 边框 


将 这 些 属性 添加 到 样式 表 ， 以 分 割 内 容 到 两 栏 中 去 。 











css3_columns/stylesheets/style.css 


#newslettert 
-webkit-column-count: 2; 
-Wwebkit-column-gap: 20px; 
-Webkit-column-rule: lpx solid #ddccb5, 
-moz-column-count: 2; 
-moz-coLumn-gap: 20px; 
-moz-column-rule: lpx solid #ddccb5 ; 
column-count: 2; 
column-gap: 20px; 
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column-rule: lpx solid #ddccb5 ; 
} 


图 4-11 展 示 了 当前 更 具 可 读 性 的 页 面 效 果 。 


AwesomeCo Newsletter 


Volume 3, Issue 12 


News From The Director veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 

veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea cu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 

commodo consequat. sunt in culpa qui officia deserunt mollit anim id est laborum. 


Duis aute irure dolor in reprehenderitin Being Awesome Birthdays 
voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint "Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
occaecat cupidatat non proident, sunt in consectetur adipisicing elit, sed «& tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
culpa qui officia deserunt mollit anim id do eiusmod tempor incididunt veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
est laborum. ut labore et dolore magna commodo consequat. 
aliqua. Ut enim ad minim 
Quick Bits of Awesome veniam." Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod sunt in culpa qui officia deserunt mollit anim id est laborum. 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
Send newsworthy things to news@awesomeco.com. 





图 4-11 基于 两 栏 的 全 新 简讯 页 面 


我 们 还 可 以 添加 更 多 内 容 , 浏览 硕 会 目 动 决定 如 何 色 整地 分 割 内 容 。 同 时 请 注意 浮动 元 素 在 
包含 它 的 栏 中 依然 浮动 正 弟 。 


要 让 这 些 栏 在 各 种 浏览 融 中 使 用 正常 , 我们 就 要 多 次 定义 相同 的 属性 , 针对 每 个 浏览 硕 的 特 
定 类 型 给 每 个 规则 属性 请 加 不 同 的 前 绥 。 








4.4.2 ”特定 厂商 的 丽 缀 


当 万 维 网 联盟 还 在 忙于 考虑 到 底 要 给 CSS 规 范 添 加 多 少 新 特性 时 ,浏览 硕 生产 商 早已 自行 汐 
加 许多 新 特性 ， ee 其 中 的 一 些 新 特性 实现 最 终 成 为 了 标准 ， 固 定 
前 缀 作为 一 种 可 行 实践 一 直 延 续 至 今 。 这 些 前 绥 可 以 让 浏览 锅 生 产 商 在 某 项 特性 成 为 最 终 规范 的 
一 部 分 之 前 先 1 ee 同时 ， 由 于 这 些 新 特性 可 能 并 未 还 循 规范 标准 ,所 以 他 们 可 以 在 保留 
既 有 实现 的 同时 , 继续 开发 符合 当前 规范 的 实现 。 大 多 数 情 况 下 , 特定 广 商 前 缀 的 版 本 是 匹配 CSS 
规范 要 求 的 ， 1 这 就 意味 大 你 害 要 为 每 种 浏览 可 类 型 多 次 声明 属性 。 以 下 列 出 
了 最 常用 的 厂 疝 前缀。 
口 Firefox 使 用 -moz -前 级 
口 Chrome 和 Safari， 以 及 许多 移动 浏览 器 、 较 新 版 本 的 Opera， 使 用 -webkit- 前 级 
口 老 版 本 的 Opera 使 用 -o- 前 绥 


但 是 ， 千 万 不 要 育 目 使 用 这 些 前 缀 。 由 于 浏览 大 实现 了 大 部 分 的 标准 ， 多 数 情况 下 ， 在 CSS 
代码 中 就 没有 必要 使 用 这 些 前 级 。 请 留意 用 户 使 用 的 浏览 带 类 型 ,并 从 样式 表 中 删 减 挥 不 再 需要 
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的 选择 硕 。 可 以 通过 http://caniuse.com/ 这 个 网 站 来 判断 是 否 需 要 使 用 前 级 。 


~ 


\/ 小 乔 爱 问 : 
过 可 以 为 每 栏 指定 不 同 的 宽度 吗 ? 

不 可 以 。 每 栏 的 宽度 必须 一 致 。 起 初 我 也 有 此 惊讶 ， 因 此 ， 我 仔细 检查 了 规范 ， 在 创作 
本 书 时 ， 尚 未 就 指定 多 种 栏 宽 做 出 规定 。 

不 过 ， 如 果 你 思考 一 下 分 栏 的 传统 使 用 场景 及 其 使 用 方式 , 就 会 明白 等 宽 栏 的 意义 所 在 
了 。 分 栏 的 目的 不 是 要 比 表 格 更 容易 构建 网 站 的 侧 边 栏 ， 而 是 在 于 让 超 长 文本 内 容 更 易 读 ， 
而 等 宽 栏 恰好 能 够 完美 地 达成 此 目的 。 


4.4.3 回 退 方案 


CSS3 的 分 栏 功 能 无 法 在 IE 9 及 之 前 的 版 本 中 使 用 ,由 于 缺失 了 分 杜 功 能 内 容 仍 是 可 谈 的 ,， 因 
此 不 考虑 回 退 方案 也 没什么 问题 。 但 如 果 你 追求 跨 浏 览 器 体验 的 一 致 性 ， 可 以 考虑 使 用 
CSS3MultiColumn ， 它 支持 基本 的 多 栏 特性 。™ 


只 需 在 样式 表 加 载 语 名 后面 加 载 它 ， 剩 余 的 工作 就 交 给 它 了 。 由 于 该 方案 只 针对 IE 9 及 之 前 
的 版 本 ,我 们 可 以 在 条 件 语句 中 加 载 它 以 保证 页 面 正常 显示 。 同 时 ,结合 JavaScript 一 并 解决 IE 8 
无 法 识别 HTML5 新 元 素 的 问题 。 




















css3 columns/newsletter.html 

<!--[if lte IE 9]> 

<script> 
// 解决 IE 8 无 法 识别 HTML5 新 元 素 的 问题 ， 以 设置 HTML5 新 元 素 样 式 
document.createElement ("section"); 
document.createElement ("heager"); 
document ,createELement ("footer"),， 
document ,createELement( "artIzctLe'" ) 
document.createElement("aside"),; 

</script> 


<script src="]javascripts/css3-multi-column.min.]s"></script> 
<!l[endif]--> 


在 正中 刷新 页 面 ， 基 于 两 栏 的 简讯 页 面 如 图 4-12 所 示 。 
禁用 JavaScript 的 用 户 将 按 之 前 的 单 栏 方式 阅读 简讯 页 面 ， 因 此 ， 所 有 的 用 户 都 兼顾 到 了 。 











GD https://github.com/BetleyWhitehorne/CSS3MultiColumn 


您 AwesomeCo Newsletter - Windows Internet Explorer 
Bj- 


Tr Favorites 说 


s/newsletter.html 


乱 | http://192.168.1.2:8000/css3_column 


看 AwesomeCo Newsletter 











AwesomeCo Newsletter 


Volume 3. Issue 12 


News From The Director 


Lorem tpsum dolor sit amet. consectetur adipisicing elt. sed do emmsmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. 


quis nostrud exercitation ullamco laboris nisi ut atiquip ex ea commodo 
consequat. 


Duis ante irure dolor in reprehendernit in voluptate velit esse cilnm dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt moltt anim ld est laborom 


Duis ante irure dolor in reprehenderit in 
voluptate velit esse ciium dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat 
cupidatat non proident. sunt in culpa qui 
officia deserunt molkit anim id est 
laborom. 


Birthdays 


Being Awesome 


Lorem tpsum dolor sit amet, consectetur adipisicing elit. sed do emsmod 
tempor incididunt ut labore et dolore magna aliqua. Ut entm ad minim veniam. 
quis nostrud exercitation ullamco laboris nisi vt aliquip ex ea commodo 
Consequat 


"Lorem ipsum dolor sit amet. 
consectetur adipisicing eltt. sed 
do emsmod tempor incididunt ut 
labore et dolore magna aliqua 
Ut enim ad minim veniam." 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. sunt in 
culpa qui officia deserunt mollit antm ld est laborom 


Quick Bits of Awesome 


Lorem ipsum dolor sit amet. consectetur adipisicing elit. sed do emsmod 
tempor incididunt ut labore et dolore magna aliqua. Ut entm ad minim veniam. 


Send newsworthy things to news@awesomeco .CoOm. 











基于 两 栏 的 正版 本 简讯 页 面 ， 需 针对 正 浏 览 硕 做 小 的 调整 


分 割 内 容 到 多 栏 中 ， 更 有 利于 内 容 的 可 该 性 。 但 是 ， 如 末 页 面 太 长 了 ,用 户 可 能 就 会 不 得 不 
滚动 回 顶部 ， 以 继续 阅读 下 一 栏 中 的 内 容 。 因 此 ， 请 小 心 使 用 分 栏 功能 。 


图 4-12 





4.5 ”未 来 展望 


本 章 讨论 的 内 容 将 有 助 于 提升 用 户 界面 ; 如 采 浏 览 锅 不 文 持 本 章 介 绍 的 这 些 新 特性 ,用户 仍 
可 以 使 用 我 们 的 产品 , 但 表格 将 失去 条 纹 效 末 , 简讯 页 面 也 依旧 是 单 栏 样式 ,并且 移动 用 户 将 不 
得 不 在 手机 上 不 断 缩 小 和 放大 屏幕 以 看 清楚 页 面 内 容 。 我 们 很 高 兴 地 发 现 , 采用 新 的 表现 层 技术 
就 能 高 效 达 成 提升 可 读 性 的 目标 , 过 往 使 用 的 那些 JavaScript 技 巧 ， 或 者 借助 大 量 和 额外 标记 的 更 糟 
糕 的 做 法 ， 现 在 都 可 以 舍弃 了 。 

现在 ， 除 正 8 及 以 下 厂 本 的 浏览 顶 以 外 ， 几 乎 所 有 的 浏览 着 都 文 持 这 些 选 择 术 。 等 到 规范 最 
终 藻 地 ,特定 厂商 前 级 如 -moz- 以 及 -webkit- 等 部 将 消失 。 当 这 一 天 到 来 时 , 就 可 以 移 除 你 的 回 
退 实现 代码 了 。 
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HTML5S 中 新 增 的 很 多 新 元 际 能 够 帮助 我 们 更 准确 地 描述 内 容 。 在 其 他 程序 工具 翻 详 我 们 代 
码 时 ， 这 就 显得 尤为 重要 。 对 大 部 分 人 而 言 ， 读 取 Web 页 面 的 程序 工具 就 是 几 形 界面 的 Webp 浏 览 
介 , 但 别 志 了 那些 需要 通过 别 的 方式 跟 我 们 的 内 容 及 应 用 交互 的 人 。 我 们 应 该 想 办 法 让 更 多 的 用 
户 能 够 访问 我 们 的 Web 内 容 。 


一 些 用 户 通过 屏 攻 阅 谈 硕 软 件 将 屏 工 上 的 图 形 化 内 容 翻 译 成 可 以 大 声 朗 谈 出 来 的 语音 。 将 屏 
幕 阅读 器 跟 操 作 系 统 或 Web 浏 览 絮 结合 起 来 ， 可 以 识别 内 容 、 链 接 、 图 片 以 及 其 他 界面 元 素 。 视 
力 正 稼 的 用 户 能 轻松 浏览 内 容 页 面 , 视 障 用 户 则 可 以 让 屏幕 阅读 需 以 自 左 而 右 、 自 上 而 下 的 方式 
为 其 朋 读 内 容 。 

尽管 屏幕 阅读 硕 技 术 取 得 了 尺 人 进展 , 却 仍 无 法 很 好 地 满足 当前 市 场 发 展 需求 。 对 于 通过 轮 
询 或 Ajax 请 求 技术 来 更 新 内 容 的 Web 页 面 动 态 区 域 ， 屏 戎 阅读 套 难 以 识别 。 由 于 屏幕 阅读 需 需 要 
高 声 朋 读 很 多 内 容 ， 因 此 ， 要 想 芍 驭 复 森 的 页面 也 并 非 易 事 。 此 外 ， 屏 篆 阅 讯 各 是 按 顺 友 朋 读 页 
面 元 素 的 ， 这 承 导 致 诸如 头 部 、 导 航 区 域 以 及 页 面 顶 部 的 所 有 小 部 件 , 在 页 面 刷新 时 又 会 被 重新 
识别 并 朋 读 一 次 。 

Web Accessibility Initiative-Accessible Rich Internet Applications ( WAILARIA， 无 障 但 网 页 倡 
议 - 无 障碍 的 富 互 联网 应 用 程序 ) 是 一 个 关于 无 障碍 网 页 应 用 的 规范 ,就 如 何 提升 网 站 特别 是 Web 
应 用 程序 可 访问 性 、 减 少 辅助 工具 使 用 者 经 常 遇 到 的 问题 提供 了 一 些 方法 。” 如 果 你 用 JavaScript 
控件 及 Ajax 技术 开发 应 用 系统 ， 这 个 规范 将 融 给 你 极 大 的 帮助 。WAI-ARIA 规 范 的 一 部 分 内 容 已 
整合 到 HTML5 规 范 中 *, 其 余部 分 则 独立 存在 , 并 作为 HTML5 规 范 的 补充 。 很 多 屏幕 阅读 器 都 使 
用 了 WAI-ARIA 规 范 中 描述 的 特性 , 如 JAWS、Window-Eyes 等 , 甚至 包括 了 Apple 内 置 的 VoiceOver 
功能 。WAI-ARIA 规 范 还 引入 了 额外 的 一 些 标记 ， 辅 助 工具 可 以 使 用 这 些 标记 作为 检测 可 更 新 区 
域 的 提示 。 


在 本 章 中 , 我 们 会 看 到 HTML5 以 及 WAI-ARIA 特 性 是 如 何 提 升 辅助 工具 使 用 者 的 用 户 体 验 的 。 尤 

























































































GD http:/www.w3.org/WAJUintro/aria.php 
@) http:/www.w3.org/TR/html5/dom.html#wai-aria 
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其 重要 的 是 ， 本 章 所 涉及 的 撤 术 无 需 考 虑 回 退 方 案 ， 因 为 许多 屏幕 阅读 硕 早 就 有 用 了 这 些 技术 。 

我 们 接 下 来 会 讨论 以 下 技术 内 容 。 

口 role 属 性 (<div roLe="document"> ): 加 屏幕 阅读 需 标 明基 个 元 素 的 作用 (C3、F3.6、 
S4、IE8、O 9.6), 

Daria-Live(<div aria-Live="poLite"> ): 标识 一 块 自动 更 新 的 区 域 , 如 Ajax 请 求 (F 3.6 
( Windows )、 S 4、 IE 8), 

Daria-hidden ( <div aria-hidden="true"> ): 标识 屏幕 阅读 器 将 忽略 的 区 域 (F 3.6 
(Windows)、S4、IE8)。 

Daria-atomic (<div aria-live="polite" aria-atomic="true"> ): 标识 活动 区 域 的 
整个 内 容 可 读 还 是 只 有 更 新 的 元 紊 可 读 (F 3.6 ( Windows )、S 4、IE 8 )。 

口 <scope> (<th scope="col">Time</th> ): 将 表 头 与 表格 的 列 或 行 关 联 起 来 (所 有 浏 
览 套 ) 

口 <caption> (<caption>This is a caption</caption> ): 创建 表格 标题 (所 有 浏览 器 )。 

Daria-describedby ( <table aria-describedby="summary"> ): 将 一 段 描 述 关 联 到 某 
个 元 素 (F 3.6 ( Windows )、S 4、IE 8)。 














5.1 实例 14: 使 用 ARIA role 属性 提供 导航 提示 


大 多 数 网 站 都 使 用 一 个 通用 的 结构 : 一 个 头 部 区 域 、 一 个 导航 区 块 、 几 块 主要 内 容 以 及 一 个 
页 脚 。 这 些 网 站 开发 时 ， 基 本 上 都 是 按 从 左 到 右 、 从 上 到 下 的 顺序 编写 元 素 处 理 代码 。 但 是 ,这 
就 意味 着 屏幕 阅读 器 不 得 不 按 这 种 顺序 为 用 户 朗读 内 容 。 由 于 大 多 数 网 站 的 每 个 页 面 都 复 用 同一 
头 部 及 导航 ， 因 此 ， 用 户 在 访问 不 同 页 面 的 过 程 中 ,就 会 一 遍 又 一 遍地 听 到 对 头 部 及 导航 内 容 半 
分 的 朗读 。 

推荐 的 解决 方案 是 提供 一 个 隐藏 的 “ 略 过 导航 ”链接 ， 并 让 屏幕 阅读 器 大 声 朗读 出 来 ， 这 个 
链接 简单 地 指向 主要 内 容 区 域 附近 的 某 个 位 置 。 但 这 并 不 是 一 个 原生 功能 ,同时 ,并非 所 有 的 开 
发 者 都 懂得 (或 记得 ) 如 何 实现 该 功能 。 

HTML5 的 rote 属 性 可 以 让 我 们 指派 一 个 “职责 ”给 页 面 上 的 每 个 元 素 。 屏 幕 阅读 器 可 以 轻 
松 解析 页 面 ， 为 所 有 职责 进行 归 类 ， 并 根据 职责 分 类 为 页 面 创建 一 个 简单 的 索引 。 例 如 ， 屏 幕 阅 
读 器 可 以 找 出 页 面 中 的 所 有 navigation ( 导航 ) 角色 并 提供 给 用 户 ， 以 便 其 能 够 在 应 用 系统 范围 
内 快速 导航 。 


这 些 角 色 源 于 WAI-ARIA 规 范 , 已 被 纳入 HTML5 规 范 中 。? 这些 角 色 分 为 两 类 ， 你 现在 就 可 
以 加 以 利用 : landmark( 地 标 ) 角色 以 及 document-structure( 文档 结构 ) 角色 。 
































(QD) http:/www.w3.0rg/TR/wai-aria/roles 
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5.1.1 地 标 角 色 


地 标 角 色 识 别 网 站 的 “兴趣 点 ”， 如 广告 条 、 搜 索 区 或 者 导航 区 等 屏 硕 阅读 带 可 以 快速 识别 
的 标记 。 
































角 色 用 途 
application 识别 包含 一 个 Web 应 用 而 非 Web 文 档 的 页 面 区 域 
banner 识别 页 面 中 的 广告 条 区 域 
complementary 标识 页 面 上 主要 内 容 的 补充 性 信息 ， 它 们 具有 上 自己 的 独立 意义 
contentinfo 识别 关于 内 容 的 信息 ， 比 如 版 权 信息 、 发 布 日 期 ， 等 等 
form 识别 页 面 的 表单 区 域 ， 该 表单 由 原生 的 HTML 表 单元 素 实 现 ， 或 者 使 用 超 链接 和 
JavaScript 控 件 实 现 
main 识别 页 面 主要 内 容 区 域 的 开始 位 置 
navigation 识别 页 面 的 导航 元 素 
search 识别 页 面 的 搜索 区 域 





接 下 来 ， 在 2.1 节 生成 的 AwesomeCo 公 司 博 客 檬 版 中 应 用 一 些 角 色 ， 在 页 面 项 端的 主 头 部 区 
域 ， 按 如 下 代码 方式 应 用 banner 角 色 。 





html5_aria/blog/index.html 


<header id="page header" role="banner"> 
<hl>AwesomeCo Blog!</h1> 
</header> 


所 要 做 的 就 是 添加 roLe="banner'" 到 现 有 的 <header> 标 签 中 。 
我 们 可 以 用 同样 的 方式 识别 导航 区 域 。 








html5_aria/blog/index.html 
<nav role="navigation"> 
<UL> 
<LI><a href="#">Latest Posts</a></LI> 
<LIL><a href='"#">Archives</a></\i> 
<li><a href='"#'">Contributors</a></LIL> 
<LI><a href="#">Contact Us</a></\i> 
</ul> 
</Vnav> 


HITMLS 规 范 中 提 到 某 些 元 素 具 有 默认 的 角色 分 配 ， 并 且 不 能 被 覆 写 。nav 元 素 必 须 使 用 
navigation 角 色 ， 从 技术 上 来 说 并 不 需要 指定 这 个 角色 。 但 由 于 屏幕 阅读 需 尚 不 能 完全 支持 默认 
值 ， 同 时 还 有 很 多 屏幕 阅读 需 支 持 ARIA 规 范 的 角色 定义 ,因此 ,为 保险 起 见 , 我 们 做 了 具体 指定 。 

主要 内 容 及 侧 边 栏 区 域 的 识别 代码 如 下 所 示 。 
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html5_aria/blog/index.html 


<section id="posts" role="main"> 
</section> 
<section id="sidebar" role="complementary"> 


<nav> 
<h3>Archives</h3> 
<UL> 
<Li><a href="2013/10">0ctober 2013</a></Li> 
<LI><a href="2013/09">September 2013</a></LIL> 
<li><a href="2013/08">August 2013</a></\i> 
<li><a href="2013/07">July 2013</a></1i> 


a-a hrafo oNTI/AFN mm NNT3 /a /1 3 ~ 
LL TCI== ZVIS/UVUD UIUC 局 上 六 /本 一 六 LL 


<li><a href="2013/05">May 2013</a></1i> 
<LI><a href="2013/04">April 2013</a></1i> 
<LI><a href="2013/063">March 2013</a></li> 
<li><a href="2013/02">February 2013</a></11i> 
<Li><a href="2013/01">January 2013</a></\i> 
<li><a href="all">More</a></\i> 
</ul> 
</7 nav> 
</Section> <!-- 侧 边栏 --> 


我 们 在 页 脚 区 域 使 用 contentinfo 角 色 识 别 发 布 日 期 及 版 权 信 息 ， 如 下 所 示 。 








html5_aria/blog/index.html 


<footer id="page footer" role="contentinfo"> 
<p>Copyright © 2013 AwesomeCo.</p> 
</footer> <! 一 页 脚 区 域 --> 


如 有 果 博 客 页 面 有 搜索 区 域 , 我 们 同样 可 以 识别 它 。 现 在 , 我 们 使 用 了 一 些 地 标 角 人 色 来 识别 我 
们 的 “兴趣 点 ”， 接 下 来 会 更 进一步 来 识别 一 些 文档 元 素 。 











WW 小 乔 爱 问 : 
xf ”如 果 有 了 如 nav 和 header 这 样 的 元 素 ， 还 需要 地 标 角色 吗 ? 


可 能 地 标 角色 看 起 来 是 多 余 的 ， 却 能 为 你 提供 所 需 的 灵活 度 。 在 无 法 使 用 HIMLS 新 元 
素 的 情况 下 ， 就 可 以 使 用 地 标 角 色 。 


使 用 search 角色 ,可 以 把 用 户 引 导 到 页 面 搜索 区 域 去 , 该 搜索 区 域 不 仅 包 含 搜索 字段 ， 
还 有 网 站 地 图 的 链接 地 址 、“ 快 速 链接 ”的 下 拉 列 表 ， 或 者 其 他 能 够 帮助 用 户 快速 找到 信息 
的 元 素 ， 而 不 是 把 用 户 引 导 到 搜索 字段 上 去 。 


规范 引入 了 很 多 角色 ， 比 引入 的 新 元 素 和 表单 控件 要 多 。 
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5.1.2 ”文档 结构 角色 


文档 结构 角色 帮助 屏 芭 阅 读 带 轻松 识别 静态 内 容 部 分 ,这 可 以 帮助 我 们 为 了 导航 的 需要 更 好 
地 组 织 内 容 信 息 © 




















角 色 用 途 
article 识别 作为 文档 独立 部 分 的 段落 
definition 识别 词 条 或 主题 的 定义 
directory 识别 一 组 内 容 的 引用 列表 ， 如 目录 ， 并 用 于 静态 内 容 
document 把 区 域 识 别 为 内 容 ， 而 非 Web 应 用 
group 识别 辅助 工具 无 法 在 页 面 摘 要 中 包含 的 用 户 界面 对 象 集合 
heading 识别 标识 页 面 区 块 的 标题 
img 识别 包含 图 像 元素 的 区 块 ， 它 所 包含 的 可 能 是 图 像 元 素 、 插 图 说 明 以 及 描述 性 文字 
list 识别 一 组 非 交 互 列 表 项 
Listitem 识别 一 组 非 交 互 列表 项 中 的 某 个 具体 项 
math 识别 一 个 数学 表达 式 
note 描述 资源 主体 内 容 的 附加 性 或 辅助 性 内 容 
presentation 识别 可 以 被 辅助 工具 忽略 的 用 于 呈现 的 内 容 
row 识别 网 格 中 的 一 行 
rowheader 识别 网 格 行头 位 置 的 单元 格 
toolbar 识别 Web 应 用 中 的 工具 栏 





许多 角色 已 经 被 HTML 标 签 隐 式 定义 了 ,比如 文 草 和 标题 。 然 而, document 角 色 并 未 被 HTML 
定义 ， 这 个 角色 非常 有 用 ,特别 是 在 应 用 中 混合 了 动态 及 静态 内 容 的 场景 下 。 例如， 基于 Web 的 
电子 邮件 客户 端 应 用 有 可 能 将 document 角 色 附 独到 包含 邮件 信息 主体 的 元 系 上 。 这 样 做 意义 重 
大 , 因为 屏 帮 阅读 需 在 处 理 键 盘 导 航 时 通常 会 有 不 同 的 方式 。 当 屏 需 阅读 天 的 焦点 落 在 一 个 应 用 
程序 元 素 上 时 ， 可 能 需要 在 按键 按 下 时 进入 Web 应 用 程序 。 反 过 来 ， 如 果 焦 点 落 在 静态 内 容 上 ， 
屏幕 阅读 器 就 可 以 通过 识别 document 角 色 让 屏幕 阅读 器 的 按键 处 理 别 的 动作 。 


我 们 可 以 在 博客 <body> 标 签 上 应 用 document 角 色 : 




















html5_aria/blog/index.html 


<body role="document"> 
这 样 可 以 确保 屏 筛 阅 旋 希 把 页 面 当 成 静态 内 容 。 
5.1.3 回 退 方案 


这 些 角色 已 经 能 够 用 于 最 新 的 浏览 希 和 屏幕 阅读 着 ， 因 此， 现在 就 可 以 使 用 它们 了 。 不 文 持 
这 些 角 色 的 浏览 带 将 会 忽略 它们 ， 所 以 ， 需 要 在 各 种 浏览 从 上 的 屏 才 阅读 软件 中 测试 它们 。 不 能 
以 为 把 角色 放 到 页 面 中 就 大 功 告 成 ， 必 须 确保 它们 在 各 种 情况 下 都 能 正常 工作 。 
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出 于 试用 目的 ,可 以 考虑 使 用 JAWS ( 使 用 最 广泛 的 屏幕 阅读 天 ) 来 进行 测试 。JAWS 并 不 是 
免费 的 ， 但 可 以 获取 一 个 有 时 间 限 制 的 演示 版 。 "因为 JAWS 在 每 个 浏览 器 上 的 行为 都 会 有 所 不 
同 ， 所 以 ， 你 应 该 用 IE、Firefox 以 及 其 他 浏览 吉 来 测试 它 。 


也 可 以 考虑 使 用 NVDA”， 这 是 一 个 非常 流行 的 免费 开源 的 屏幕 阅读 器 。 


角色 可 以 帮助 屏幕 阅读 器 识别 页 面 上 的 重要 区 域 或 元 素 , 同时 , 还 能 为 屏幕 阅读 需 提 供 元 素 
当前 状态 的 提示 信息 。 由 于 现代 应 用 程序 往往 包含 动态 内 容 , 所 以 要 及 时 通知 屏 才 阅读 从 页 面 的 
更 新 状况。 接 下 来 ， 就 来 讨论 其 中 的 奥妙 。 
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以 往 我 们 在 Web 应 用 程序 开发 过 程 中 大 量 使 用 了 JavaScript 技 术 。 流 行 的 JavaScript 框 架 如 
Backbone 和 Ember 帮 助 我 们 开发 出 强大 的 单 页 面 应 用 ， 生 成 的 用 户 界 面 更 具 啊 应 式 特点 ， 从 而 避 
兔 了 页 面 刷 新 。 在 开发 这 些 类 型 的 页 面 时 , 通常 的 做 法 是 呈现 出 某 种 视觉 效果 以 通知 用 户 页 面 
产生 了 某 些 改变 。 然而， 屏幕 阅读 带 使 用 者 看 不 到 这 些 视觉 上 的 信和 号。 在 以 前 ， 这些 用 户 通常 会 
禁止 浏览 融 使 用 JavaScript， 然后 使 用 开发 者 提供 的 交互 回 退 方案 。 但 是 2012 年 WebAIM 的 一 个 调 
查 发 现 , 有 很 多 屏幕 阅读 器 软件 用 户 不 再 禁用 JavaScript 了 。 这 就 意味 着 他 们 使 用 了 与 他 人 一 样 的 
页 面 ， 因 此 ， 我 们 需要 考虑 在 界面 发 生 改 变 时 通知 这 些 用 户 。” 


WAI-ARIA 规 范 提供 了 一 个 很 好 的 解决 方案 叫 live region ( 活动 区 域 )。 当 前 各 种 主流 屏幕 阅 
读 絮 软件 都 可 以 在 IE、Firefox 以 及 Safari 中 使 用 这 个 方案 。 


AwesomeCo 公 司 联络 部 的 执行 董事 希望 做 个 新 的 主页 。 主 页 中 分 别 添 加 服务 内 容 、 联 系 信 息 
以 及 公司 人 容 介 的 链接 。 他 坚持 主页 不 能 滚动 ， 因 为 他 认为 “用 户 讨 厌 滚动 "。 他 还 硕 望 实现 一 个 
页 面 原型 ,这 个 页 面 需 要 有 一 个 水 平 末 单 ， 并 在 用 户 点 击 采 单 项 时 相应 更 改 页 面 的 主要 内 容 。 这 
很 容易 实现 , 结合 aria-1live 属 性 , 我 们 可 以 着 手 开展 之 前 没 能 做 好 的 一 些 工作 一 一 来 取 对 屏 筑 
阅 谈天 用 户 友 好 的 方式 来 实现 这 种 类 型 的 界面 。 

创建 一 个 如 图 5$-1 所 示 的 简单 页 面 。 我 们 将 在 主页 放置 所 有 的 内 容 , 如 果 没 有 禁用 JavaScript， 
就 将 使 用 JavaScript 来 隐藏 第 一 块 内 容 以 外 的 所 有 内 容 。 通 过 定义 销 来 让 导航 链接 指向 相应 的 各 部 
分 内 容 , 并 通过 jQuery 在 点 击 这 些 链接 时 触发 事件 , 在 事件 中 切换 主要 内 容 。 这 样 , 使 用 JavaScript 
的 用 户 就 可 以 看 到 预期 效果 , 而 那些 无 法 使 用 JavaScript 的 用 户 仍 能 够 看 到 页 面 的 所 用 内 容 。 特别 
是 对 于 屏 攻 阅读 可 用 户 ， 他 们 就 可 以 捕捉 到 页 面 的 改变 。 






























































GD http://www.freedomscientific.com/downloads/jaws/jaws-downloads.asp 
@) http://www.nvda-project.org/ 

(3) http://backbonejs.org/ 

(4) http://emberjs.com/ 


(5) http://webaim.org/projects/screenreadersurvey4/ 
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AwesomeCo 


Welcome Services Contact About 





Contact 
The contact section 
Copyright © 2013 AwesomeCo. 


Home About Terms of Service Privacy 





图 5-1 主页 原型 ,通过 jQuery 改变 主要 内 容 


5.2.1 创建 页 面 








我 们 先 来 创建 一 个 基本 的 HTML5 页 面 ， 并 添加 欢迎 内 容 ， 当 用 户 访问 页 面 时 ， 这 将 作为 








认 展示 内 容 。 审 有 导航 工具 栏 及 跳 转 链接 的 页 面 代 码 如 下 所 示 。 


html5_aria/homepage/index.html 


<1DOCTYPE htmL> 
<htmL lang="en-US"> 
<head> 
<meta charset="utf-8"> 
<title>AwesomeCo</titlie> 
<link rel="stylesheet" href="stylesheets/style.css"> 
</head> 
<body> 
<header id="header" role="banner"> 
<hl>AwesomeCo </hl> 
<nav> 
<UL> 
<1li><a h >Welcome</a></1i> 
<li><a href="#services">Services</a></\i> 
<LI><a href="#contact">Contact</a></11i> 
<LI><a href="#about">About</a></1\i> 


a fil ~ 
a 


</Vnav> 
</header> 
<section id="content" 
role="document" aria-live="assertive" aria-atomic="true"> 
<section id="welcome"> 
<header> 
<h2>Welcome</h2> 
</header> 
<p>ihe welcome section</p> 
</section> 
</section> 


pi 
部 
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<footer id="footer" role="contentinfo"> 
<p>Copyright © 2013 AwesomeCo .</p> 
<nav> 
<UL> 
<Li><a href="#'">Home</a></1li> 
<li><a href="#'">About</a></1i> 
<li><a href="#">Terms of Service</a></1i> 
<li><a href="#">Privacy</a></\i> 
</ul> 
</nNnayv> 
</footer> 


</body> 
</html> 


欢迎 内 容 有 一 个 名 为 weLcome 的 ID ， 对 应 导航 工具 栏 中 的 相应 销 。 我 们 以 相同 方式 定义 其 他 





html5_aria/homepage/index.html 


<section ijid="services"> 
<header> 
<h2>Services</h2> 
</header> 
<p>The services section</p> 
</section> 


<section id="contact"> 
<header> 
<h2>Contact</h2> 
</header> 
<p>The contact section</p> 
</section> 


<section id="about"> 
<header> 
<h2>About</h2> 
</header> 
<p>The about section</p> 
</section> 


以 下 标记 包含 了 四 块 内 容 区 域 。 


html5_aria/homepage/index.html 


<section id="content" 
role="document" aria-live="assertive" aria-atomic="true"> 


这 一 行 里 的 属性 通知 屏 欠 阅读 上 益 这 块 页 面 内 容 区 域 是 可 更 新 的 。 
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接 下 来 ， 添 加 CSS 代 码 ， 创 建 我 们 所 需 的 布局 。 这 段 CSS 代 码 与 设置 博客 的 CSS 代 码 类 似 。 
在 stylesheets/style.css 文 件 中 ， 为 <body> 标 签 添加 基本 的 样式 。 





html5_aria/homepage/stylesheets/style.css 
body{ 

width: 960px; 

margin: 1l5px auto ; 
} 


pt 
margin: © 0 20px 90; 
} 


p, lit 
line-height: 20px; 
font-family: Arial, "MS Trebuchet", sans-serif,; 


} 
然后 浴 加 设置 头 部 区 域 水 平 导航 条 样式 的 CSS 代 人 码 。 


html5_aria/homepage/stylesheets/style.css 
#headert 

width: 100%; 
} 


#header > nav > ul, #footer > nav > ult{ 
list-style: none; 
margin: 0; 
padding: 0; 

} 

#header > nav > ul > 1i, #footer > nav > UL > 1it 
padding:0; 
margin: 0 20px 0 0; 
display:inline,; 


} 
最 后 ， 设 置 页 脚 样式 使 其 位 于 页 面 撒 部 ， 且 设置 文本 居中 显示 。 





html5_aria/homepage/stylesheets/style.css 
footer#footert 

clear: both; 

width: 100%; 

display: block; 

text-align: center; 


} 
现在 ， 我 们 来 看 看 当 点 击 导 航 条 上 的 链接 时 ， 如 何 改变 相关 的 页 面 内 容 。 
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1. poLite 和 assertive 更 新 方式 


在 使 用 aria-Live 的 情况 下 , 有 两 种 方式 可 用 来 提醒 用 户 页 面 发 生 改 变 。poLite 方 式 不 会 对 
用 户 的 使 用 造成 干扰 。 比 如 , 如果 用 户 的 屏幕 阅读 需 正 在 读 取 一 个 句子 而 另 一 个 页 面 区 域 有 了 更 
新 ， 在 采用 polite 方 式 ( 优雅 方式 ) 的 情况 下 ， 屏 闪 阅 读 右 仍 会 继续 读 取 当前 句子 ， 直 至 谈 取 
完成 。 然 而 ， 如 有 果 采 用 assertive 方 式 (独断 方式 )， 更 新 的 区 域 将 获得 高 优先 级 ， 屏 芥 阅 旋 关 
就 会 中 断 原 来 语句 的 读 取 并 开始 读 取 更 新 的 内 容 区 域 。 开 发 网 站 时 ， 合 理 使 用 中 断 方 式 很 重要 。 
过 度 使 用 assertive 方 式 会 让 用 户 不 堪 其 扰 ， 所 以 不 要 轻易 使 用 。 在 我 们 的 示例 中 ，assertive 
方式 是 恰当 的 选择 (aria-Live="assertive" )， 因 为 我 们 在 某 一 时 间 内 要 独占 显示 一 块 区 域 的 
内 容 ， 并 隐藏 其 他 内 容 区 域 。 

2. atomic 更 新 方式 

第 二 个 属性 设置 是 aria-atomic="true"， 指 示 屏 幕 阅读 各 该 取 更 新 区 域 的 全 部 内 容 。 如 果 
该 属性 设置 为 false， 则 通知 屏 闪 阅读 盖 只 读 取 更 新 的 方 点 内 容 。 由 于 我 们 需要 更 换 整 块 内 容 区 
域 ， 因 此 , 在 这 里 通知 屏幕 阅读 需 该 取 所 有 内 容 是 有 着 理 的 。 如 果 只 是 更 换 单条 列表 项 或 用 Ajax 
方式 往 表 格 中 追加 内 容 ， 可 以 考虑 把 该 属性 设置 为 faLse。 




































































5.2.2 ”隐藏 内 容 区 域 


要 隐藏 内 容 区 域 , 需要 编写 一 些 JavaScript 代 码 并 添加 到 页 面 中 。 创建 一 个 新 文件 application.js， 
然后 同 jQuery 库 一 样 ， 把 它 包含 进 页 面 。 





html5_aria/homepage/index.html 
<script 

src="http://ajax.googleapis,.com/aijax/ Libs/ijquery/1.9.1/jquery.min.js"> 
</sScript> 


<script src="7avascripts/application,.];s"></script> 


application.js 文 件 中 的 代码 如 下 所 示 。 


html5_aria/homepage/javascripts/application.js 
Line1 Var configureTabSelection = function()t{ 
$("#services, #about, #contact").hide().attr("aria-hidden", true); 
$("#welcome").attr("aria-hidden" ,false); 


5 $("nav ul").click(function(event)t 
var target = $(event.target); 
if(target.is("a"))t{ 
event.preventDefault(),; 
If ( $(target.attr("href")).attr("aria-hidden") ){ 
10 activateTab(target.attr("href")); 


}; 
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}; 

二 
四 
15 

- Var activateTab = function(selector)t 
$("[aria-hidden=false]").hide().attr("aria-hidden", true); 
$(selector).show().attr("aria-hidden", false); 
二 
20 

- ConfigureTabSelection(); 


在 第 2 行 ， 我 们 隐藏 了 服务 内 容 、 公 司 人 简介 以 及 联系 信息 等 区 块 。 我 们 使 用 了 aria-hidden 
属性 ， 并 设置 属性 值 为 true， 隐 着 相应 各 个 区 块 。 第 3 行 给 欢迎 内 容 区 块 设置 相同 的 属性 ， 但 属 
性 值 设置 为 faLse， 以 显示 该 区 块 。 添 加 这 些 属 性 能 够 帮助 辅助 工具 发 现 哪 些 元 系 被 隐藏 了 了 ， 当 
处 理 信 息 展 现 与 否 时 ， 通 过 这 种 方法 我 们 很 容易 识别 哪些 区 块 需要 隐藏 或 显示 。 

在 第 $ 行 ,我 们 捕捉 导航 条 的 点 击 事件 ; 在 第 7 行 ， 判 断 点 击 的 是 具体 哪个 元 素 。 如 果 点 击 了 
链接 ,， 则 检查 相应 的 区 块 是 否 已 被 隐藏 。 通 过 jQuery 选择 名 ,所 点 击 链接 的 href 属 性 能 够 帮助 我 
们 定位 到 相应 区 块 ， 如 第 9 行 所 示 。 

如 果 内 容 区 块 是 隐藏 的 ， 就 调用 activateTab() 方 法 ,传人 一 个 CSS 选 择 器 参数 。 该 方法 通 
过 使 用 jQuery 的 hide() 方 法 隐藏 其 他 区 块 ， 然 后 使 用 show( ) 方 法 显示 所 选区 块 。 同 时 还 交换 了 
aria-hidden 属 性 的 值 。 


这 如 是 我 们 要 做 的 。 现 在 ， 屏 者 阅读 毅 就 能 够 捕 换 到 区 块 的 改变 。 




















5.2.3 回 退 方案 


和 角色 一 样 ， 该 解决 方案 已 得 到 最 新 版 本 屏 攻 阅 旋 关 的 文 择 。 通 过 这 循 最 佳 实践 ， 例 如 不 唐 
突 的 JavaScript 实 践 原则 ， 我 们 就 可 以 轻松 实现 面 回 广泛 用 户 的 方案 。 通 过 JavaScript 对 用 户 页 面 
进行 更 新 时 ， 可 以 在 元 素 中 加 上 ARIA 角 色 ， 以 便 屏 幕 阅 旋 希 及 时 捕捉 元 素 状 态 。 


我 们 经 第 通过 列表 方式 展示 数据 ， 接 下 来 将 讨论 如 何 确 你 数据 的 可 访问 性 。 


5.3 实例 16: 提升 表格 的 可 访问 性 


多 年 来 , HTML 表 格 的 可 访问 性 一 直 是 令 Web 开 发 者 痛苦 的 根源 。 对 于 视觉 正常 的 用 户 而 言 ， 
浏览 表格 、 获 取 内 容 都 是 很 容易 的 事情 。 但 对 于 使 用 屏 欠 阅读 带 的 用 户 来 说 ,要 想 玩 转 表格 会 十 
分 困难 。 更 糟 的 是 , 在 采用 CSS 进 行 页 面 布局 之 前 , 开发 者 往往 使 用 表格 来 定义 页 面 的 各 个 区 块 。 
这 给 屏幕 阅读 需 软 件 造成 了 巨大 障碍 , 因为 屏幕 阅读 右 软 件 不 得 不 概览 表格 并 计算 如 何 读 取 所 需 
内 容 。 即 便 在 今天 ， 也 还 存在 一 些 依赖 于 表格 进行 页 面 布 局 的 网 站 ， 这 也 促使 HTML5 规 范 为 用 
于 布局 的 表格 创建 了 一 个 特别 的 ARIA 角 色 。 
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> <table role="presentation"> 
ab es 

尽管 使 用 表格 来 控制 页 面 布 局 是 一 个 可 怕 的 方案 ， 因 为 它 混 用 了 展示 层 和 内 容 ， 但 事实 是 ， 
由 于 人 们 常 常 使 用 表格 来 进行 页 面 布 局 ， 屏 和 希 阅 读 帮 软件 早已 就 此 提供 了 非常 好 的 导航 方案。 
presentation 角 色 就 是 解决 这 个 问题 的 关键 。 

尽管 现实 中 有 了 新 的 角色 可 供 使 用 , 但 表格 并 非 用 于 布局 。 表 格 设计 的 出 发 点 是 让 我 们 展现 
列表 数据 ， 而 根据 表格 的 复杂 度 ,， 我 们 可 能 要 帮助 屏幕 阅读 需 为 访问 者 提供 更 多 内 容 。 通 过 在 表 
头 和 相关 的 行列 之 间 设 置 更 多 的 关联 , 来 更 清晰 地 组 织 表 格 内 容 ， 同 时 ,我 们 还 会 为 表格 添加 题 
注 和 描述 。 

AwesomeCo 公 司 要 在 12 月 下 旬 举 办 年 会 ， 即 AwesomeConf 大 会 ， 网 站 上 有 一 个 页 面 将 通过 
HTIML 表 格 来 显示 会 议 日 程 安排 。 由 于 以 前 在 年 会 结束 时 的 反 锯 调查 中 有 人 参 会 者 抱怨 网 站 存在 访 
问 障碍 ， 因 此 ， 这 次 年 会 网 站 要 确保 屏 硕 阅读 右 能 够 很 好 地 识别 该 表格 。 下 图 以 HTML 表 格 的 形 
式 显示 了 当前 大 会 的 日 程 安排 。 


会 议 日 程 


Time Room 100 Room 101 Room 152 Room 153 


8:00 
| 









































Opening Remarks and Keynote - Ballroom 


Ea Creating 了 Better Marketing | Embracing Social| Pop Culture And Visualizing 
| Videos Media You Success 


1 Build a Solid Fundraising Print Te end Mobile First? Not | Proving What 
AM Campaign So Fast! Works 
i110 Making Connections Marketing Panel Clear Content ROY 
| Experiences 


12:00 Lunch 





请 选择 你 想 参 加 的 会 议 。 瘟 这 提示 ; 主题 报告 和 午餐 在 权 会 厅 。 
几 5-2 ” AwesomeConf 大 会 日 程 表 页 面 


以 下 是 当前 页 面 的 代码 片段 。 





htmlS_accessible tables/original_index.html 
<hl>Conference Schedule</h1> 


<table> 

<tr> 
<th>TIme</th> 
<th>Room 100</th> 
<th>Room 101</th> 
<th>Room 152</th> 
<th>Room 153</th> 

</tr> 

<tr> 
<th>8:00 AM</th> 





88 第 5 章 ”构建 可 访问 性 界面 


<td colspan="4">0pening Remarks and Keynote - Ballroom</td> 
</tr> 
<tr> 
<th>9:00 AM</th> 
<td>Creating Better Marketing Videos</td> 
<td>Embracing Social Media</td> 
<td>Pop Culture And You</td> 
<td>Visualizing Success</td> 
</tr> 
</table> 
<section> 
<p> 
Use this grid to find the session YOU want 
to attend. Note that the keynote and Lunch 
are in the ballroom. 
</p> 
</section> 


这 是 一 个 相当 标准 HTML 表 格 , 但 它 在 3 和 J 利 方 向 都 有 标题 。 当 一 些 屏幕 阅读 器 及 浏览 器 
配合 使 用 时 ， 这 样 做 会 出 现 问题 。 接 下 来 我 们 会 做 些 处 理 ,让 标题 相关 性 在 代码 层面 和 屏幕 阅读 
器 的 可 访问 性 层面 都 变 得 更 清晰 。 











5.3.1 把 标题 与 列 结合 起 来 


对 于 人 简单 表格 而 言 , <th> 标 签 足 以 描述 表 尖 。 浏览 各 和 屏 舌 阅读 剖 使 用 一 个 稍微 有 些 复杂 的 
算法 来 定位 标题 天 联 的 行 或 列 。 在 更 复杂 的 表格 应 用 中 ,可 以 使 用 scope 属 性 来 精确 指定 标题 天 
联 哪 一 行 或 哪 一 列 。 以 下 是 实现 代码 。 





html5_accessible tables/accessible index.html 
<tr> 

<th scope="col">Time</th> 

<th scope="col">Room 100</th> 

<th scope="col">Room 101</th> 

<th scope="col">Room 152</th> 

<th scope="col">Room 153</th> 
</tr> 


Vvvyvyv 


<tr> 

<th scope="row">8:00 AM</th> 

<td colspan="4">0pening Remarks and Keynote - Ballroom</td> 
</tr> 


v 


<tr> 
> <th scope="row">9:00 AM</th> 
<td>Creating Better Marketing Videos</td> 
<td>Embracing Social Media</td> 
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<td>Pop Culture And You</td> 
<td>Visualizing Success</td> 
</tr> 


对 于 所 有 的 列 标题 ， 我 们 指定 scope="col"， 而 对 行 标 题 ， 使 用 scope=" row"。 这 可 以 让 
屏幕 阅读 絮 更 容易 关联 到 各 个 列 或 行 , 我 们 还 可 以 通过 更 清晰 地 描述 表格 的 作用 来 进一步 提升 表 
格 的 整体 可 访问 性 。 














5.3.2 用 题 注 和 描述 解释 表格 


如 果 使 用 表格 来 展示 信息 , 最 好 在 表格 上 方 或 底部 设置 标题 来 描述 表格 的 作用 。 通过 把 表格 
标题 放置 在 <caption> 标 签 里 ,就 可 以 让 屏幕 阅读 絮 利 用 该 题 注 更 清晰 地 “ 读 出 ”表格 。 如 以 下 
代码 所 示 ， 我 们 把 <caption> 标 签 放 在 <table> 开 标签 下 面 。 

















htmlSs accessible tables/accessible index.html 
> <caption> 
> <h1L>Conference Schedule</h1> 
> </caption> 

<tr> 





1 。 小 乔 爱问: 
过 ”可 以 使 用 id 和 <headers> 属 性 吗 ? 


多 年 以 来 ， 分 配 唯一 id 给 各 个 表 头 ， 然 后 在 每 个 表格 的 单元 格 内 通过 <headers> 必 性 
引用 id， 这 种 方法 被 视 为 关联 表 头 及 对 应 列 的 最 佳 实践 ， 如 以 下 代码 所 示 。 


<table> 
<tr> 
<th id="name">Name</th> 
<th id="email"></th> 
</tr> 
<tr> 
<td headers="name">Ted</td> 
<td headers="email">ted@puzzlesthebar.com</td> 
</tr> 
<tr> 
<td headers="name">Barney</td> 
<td headers="email">barney@puzzlesthebar.com</td> 


</tr> 
</table> 


对 于 有 大 量 数 据 行 的 简单 表格 ， 这 种 方式 并 不 会 比 使 用 scope 带 来 更 多 好 处 ， 反 而 增 


加 了 大 量 的 页 面 标记 。 这 种 方式 更 适用 于 非常 复杂 的 表格 ,例如 存在 说 套 表 头 。 如 果 要 处 理 
的 表格 的 确 如 此 复杂 ， 你 也 应 该 首先 考虑 是 否 能 用 更 易 理 解 的 方式 来 重新 组 织 信息 。 


90 第 5 章 ”构建 可 访问 性 界面 


有 时 候 一 处 题 注 并 不 足以 摘 述 表格 的 用 途 。 我 们 可 以 使 用 aria-describedby 角 色 来 链接 表 
格 到 页 面 的 一 段 描 述 性 内 容 上 。 此 处 的 表格 恰好 有 一 个 描述 内 容 块 ,并 已 放 在 <section> 标 签 内 。 
接 下 来 为 <section> 标 签 设 置 id 属 性 。 
> <section id="schedule instructions"> 
<p> 
Use this grid to find the session you want 
to attend. Note that the keynote and lunch 
are in the ballroom. 
</p> 
</section> 


添加 id 属性 后 ， 就 可 以 让 <tabtLe> 标 签 引用 描述 内 容 区 块 了 。 


<table aria-describedby="schedule instructions"> 


包含 题 注 及 附加 描述 后 的 表格 可 以 帮助 屏 闫 阅读 天 用 户 更 清晰 地 理解 表格 上 下 文 , 同时 为 视 
力 正 党 的 用 户 大 大 提升 易 用 性 。 各 种 浏览 疾 早 已 文 持 <caption> 元 厅 ， 那些 无 法 识别 
aria-describedby 角 色 属 性 的 浏览 器 会 耳 接 忽 上 略 <caption> 元 系 ， 因 此 ,没有 理由 不 在 数据 表 
格 中 使 用 这 些 技术 。 

















5.4 未 来 展望 


HTML5 和 WAI-ARIA 规 范 为 实现 更 具 访 问 性 的 Web 应 用 铺 平 了 道路 。 具 备 识别 页 面 更 新 区 域 
的 能 力 后 , 开发 者 就 可 以 创建 更 丰富 的 JavaScript 应 用 ， 而 不 用 太 过 担心 可 访问 性 的 问题 。 由 于 易 
用 性 功能 大 大 增强 ， 前 面 提 到 的 这 些 角 色 都 已 为 Ember 、jQuery Mobile 以 及 其 他 许多 流行 的 
JavaScript 框 架 所 文 持 ,也 就 是 说 ， 如 果 开 发 者 使 用 这 些 框 染 来 开发 Web 应 用 ,就 意味 着 自动 创建 
了 更 具 访 问 性 的 应 用 。 




















第 二 部 分 





新 视角 、 新 声音 


在 这 一 部 分 ， 我 们 将 把 注意 力 从 前 面 的 结构 及 界 
面 转 到 使 用 HTML5 和 CSS3 进行 画图 、 播 放 多 媒体 
文件 以 及 创建 我 们 目 己 的 界面 元 素 等 方面 。 我 们 将 从 
使 用 HIMLS 新 的 <canvas> 标签 画图 着 手 ， 之 后 讨 
论 <audio> 和 <video> 标签 。 了 最后， 介绍 如 何 使 用 
CSS3 来 实现 阴影 、 淘 变 、 转 换 及 动画 等 效果 。 














以 往 ， 如 有 果 Web 应 用 需要 用 到 图 像 ， 我 们 通常 会 打开 所 选 图 像 处 理 软件 来 创建 一 个 图 像 ， 并 
通过 <img> 标 签 将 其 舱 入 到 页 面 中 。 如果 需 要 动画 , 则 会 考虑 Flash。HTML5 的 <canvas> 元 素 ( 男 
布 ) 能 够 帮助 我 们 通过 JavaScript 编 程 方式 在 浏览 硕 中 创建 图 像 甚 至 是 动画 。 可 以 用 <canvas> 元 
素 创建 简单 或 复杂 的 形状 和 网 表 ， 而 无 需 借 助 服务 器 端 库 、Flash 或 其 他 插件 。 正 巧 , 本 草 将 讨论 
形状 和 图 表 的 实现 。 


首先 ,来 了 解 如 何 使 用 JavaScript 和 <canvas> 标 签 ， 在 构建 AwesomeCo 公 司 的 商标 时 ， 我 们 
将 绘制 一 些 简 单 的 形状 。 之 后 ， 使 用 与 画布 结合 的 图 形 库 来 创建 有 关 浏 览 硕 统计 数据 的 条 形 图 。 
还 将 讨论 一 些 常 见 问 题 的 特定 回 退 方案 ， 因 为 画布 更 像 是 一 个 编程 接口 ， 而 不 只 是 HTML5 元 杂 。 
然后 ,实现 SVG ( Scalable Vector Graphics， 可 伸缩 矢量 图 形 ) 版 本 的 商标 ，SVG 是 在 浏览 硕 中 国 
图 的 另 一 种 实现 。 我 们 将 了 解 以 下 特性 。 

口 <canvas> (<canvas><p>Alternative content</p></canvas> ): 支持 通过 JavaScript 

创建 位 图 (C4、F3、S3.2、IE9、0 10.1、ioS 3.2、A2)。 

口 <svg> (<svg><!-- XML content --></svg> ): 支持 通过 XML 创 建 矢量 图 (C4、F 3、 

S3.2、 IE9、 O10.1、 iO0S 3.2、A2), 








6.1 实例 17: 在 画布 上 绘制 商标 


对 HTML5 画 布 的 探究 从 绘制 简单 的 形状 和 线条 开始 。 首 先 ， 在 页 面 中 放置 一 个 <canvas> 标 
签 。<canvas> 元 系 本 刁 并 不 具备 什么 功能 ， 添 加 它 到 页 面 中 是 为 了 呈现 一 个 可 以 通过 JavaScript 
进行 绘图 的 空 晶 画板。 定义 一 个 指定 完 度 和 高 度 的 画布 ， 代 码 如 下 所 示 。 























html5_canvas/canvas_simple_ drawing.html 


<canvas id="my _ Canvas” width= "了 1230” height="130"> 
Fallback content here 
</Canvas> 


不 过 ,在 不 更 改 内 容 的 情况 下 ,我 们 无 法 使 用 CSS 来 控制 或 修改 <canvas> 元 素 的 宽度 及 高 度 。 
因此 ， 需 要 在 声明 画布 的 时 候 决 定 画 布 的 尺寸 ， 或 者 ， 通 过 程序 方式 来 调整 。 
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我 们 使 用 JavaScript 在 画布 中 画 各 种 形状 。 即 使 为 不 文 持 <canvas> 标 签 的 浏览 亏 提 供 了 回 退 
方案 ， 仍 需 防 止 JavaScript 代 码 操 作画 布 元 素 。 最 好 的 方式 是 只 有 当 浏 览 句 文 持 <canvas> 时 ， 才 
运行 相应 的 JavaScript 代 人 码 。 代 码 如 下 所 示 : 














html5_canvas/canvas_simple_drawing.html 
Var canvas = document ,getELementById( my canvas ) ; 
If (Canvas.getContext ){ 

Var context = Canvas .getContext( ' 20 ) ; 


+eLset 
// 显示 画布 隐藏 内 容 ， 
// 或 者 在 元 素 中 显示 文本 内 容 
} 
通过 id 属 性 定位 <canvas> 元 素 , 并 调用 其 getContext() 方 法 。 如 果 获 取 到 getContext() 方 
法 的 返回 值 ， 我 们 就 获取 了 画布 的 2D 上 下 文 ， 后 面 就 可 以 添加 对 象 了 。 和 缺少 画 布 上 下 文 是 无 法 运 
行 JavaScript 代 码 的 。 一 开始 我 们 就 考虑 构建 回 退 方案 的 处 理 代 码 部 分 ， 因 为 不 像 其 他 情况 ， 如 果 
试图 在 不 支持 <canvas> 标 签 的 浏览 融 中 访问 该 上 下 文 ， 用 户 将 对 JavaScript 出 错 信息 一 览 无 遗 。 
一 旦 获取 到 画布 上 下 文 ， 就 添加 一 些 元 素 到 该 上 下 文中 ， 这样， 这 些 元 系 将 会 呈现 出 来 。 例 
6 方 基 的 in BE 





如 


3 


html5_canvas/canvas_simple_drawing.html 

context,fillStyle = "rgb(200,0,0)"; 

context,fillRect (10, 10, 100, 100); 

首先 设置 方块 的 填充 色 ， 然 后 创建 方块 目 身 。 画 布 的 2D 上 下 文 是 grid (网 格 )， 左 上 角 为 默 
认 坐 标 原点 。 如 图 6-1 所 示 ， 当 创建 一 个 形状 时 ， 我 们 会 指定 模 坐 标 及 纵 坐 标的 开始 位 置 ， 以 及 


形状 的 宽度 和 高 度 。 





0 20 40 60 80 100 








每 个 形状 都 会 被 添加 到 它 所 在 的 层 里 ,因此 , 你 可 以 创建 三 个 方块 ,相互 之 间 间 隔 10 个 像素 
所 的 仿 移 量 ， 代 码 如 下 所 示 。 
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html5_canvas/canvas_simple_drawing.html 

context,fillStyle = "rgb(200,0,0)":; 
context .fillRect (10, 10, 100, 100),， 
context,fillStyle = "rgb(0,200,0)"; 
context,fillRect (20, 20, 100, 100); 


context.fillStyle = "rgb(0,0,200)"; 
context,fillRect (30, 30, 100, 100); 


之 后 ， 这 三 个 方块 将 依次 堆 生 在 其 他 方块 上 ， 如 图 6-2 所 示 。 





网 6-2 





我 们 完全 可 以 在 画布 上 通过 简单 形状 、 线 条 、 弧 线 及 文本 的 组 合 来 创建 复杂 图 像 。 接 下 来 实 
现 一 个 更 复杂 的 示例 , 通过 画布 重新 设计 AwesomeCo 公 司 的 商标 。 这 个 商标 很 简单 , 如 图 6-3 所 示 。 


mAWwesommeCo 
图 6-3 ” AwesomeCo 公 司 的 商标 


这 个 商标 由 一 串 文 字 、 一 条 和 斜 角 路 径 、 一 个 正方 形 以 及 一 个 三 角形 构成 。 创 建 一 个 新 的 
HTMLS 文 档 来 处 理 这 个 商标 。 为 简单 起 见 ,我 们 将 在 这 个 文件 中 编写 所 有 的 实现 代码 ,在 </body> 
闭 标 签 之 前 添加 JavaScript 代 人 码 块 标记 <script></script>， 将 商标 开发 代码 包含 其 中 。 














html5_canvas/logo.html 
<!IDOCTYPE htmL> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>AwesomeCo Logo Test</title> 
</head> 
<body> 
<script> 
</script> 
</body> 
</html> 


创建 一 个 JavaScript 函 数 来 处 理 绘 制 商 标的 代码 ， 该 限 数 会 检测 画布 2D 上 下 文 是 否 可 用 。 
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html5_canvas/logo.html 


var drawLogo = function()t{ 
Var canvas = document.getelementByld("1i0go"),; 
Var context = canvas.getContext ("2d"); 

}; 


初次 检测 <canvas> 元 系 是 否 存 在 之 后 ， 调 用 该 函数 ， 代 人 码 如 下 所 示 : 








html5_canvas/logo.html 
Var canvas = document .getELementById( i0g0"); 


If (canvas.getContext)t 
drawLogo ( ) ; 
} 


我 们 寻找 页 面 中 ID 为 Logo 的 元 素 ， 因 此 最 好 确保 之 前 在 文档 中 添加 了 <canvas> 元 素 ， 以 便 
能 够 找到 它 。 








html5_canvas/logo.html 
<canvas id="iogo" width="900" height="80"> 


<hl>AwesomeCo</hl1> 
</canvas> 


接 下 来 开始 绘制 商标 。 


6.1.1 绘制 线条 


我 们 通过 一 个 “ 连 点 ”的 游戏 来 完成 绘制 线条 的 工作 。 在 画布 网 格 指 定 起 始点 ,之 后 指定 要 
移动 到 的 其 他 点 的 坐标 。 随 看 在 画布 上 不 断 移动 ， 各 个 点 也 束 补 连接 起 来 了 ， 如 图 6-4 所 示 。 





0 10 20 40 50 60 80 


TTTTIAANTTTTTITT 
回国 加 | 固 Et 





通过 beginPath () 方 法 开始 绘制 线条 ， 人 然后 创建 路 径 。 
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html5_canvas/logo.html 


context,fillStyle = "#FF0O000",; 
context.strokeStyle = "#FFO000", 


context .lineWidth = 2; 
context ,beginPath( ) ; 
context ,moveTo (©O, 40),; 
context.lineTo(30, 0); 
context.lineTo(60, 40 ); 
context,lineTo(285, 40 ); 


context,fill(). 
context,closePpatht{); 


在 绘制 之 前 ,需要 先 为 画布 设置 画笔 色 和 填充 色 。 画笔 色 是 所 绘制 线条 的 颜色 。 填充 色 是 庄 
如 长 方形 、 三 角形 等 形状 的 内 部 填充 颜色 。 可 以 把 男 笔 色 看 作 形 状 的 边框 颜色 ， 而 十 充 色 是 填充 
在 形状 里 的 颜色 。 


定义 了 路 径 上 的 所 有 点 后 ， 就 可 以 调用 stroke1() 方 法 来 连接 各 点 绘制 线条 。 之 后 调用 
closePath() 方 法 完成 路 径 绘 制 。 完 整 的 线条 如 图 6-5 所 示 。 


/A 


网 6-5 
接 下 来 给 画布 添加 “AwesomeCo” 文 本 信息 。 























6.1.2 添加 “AwesomeCo” 文 本 信息 


在 画布 中 添加 文本 信息 之 前 ， 要 先 选 定 字 体 和 字体 大 小 。 然 后 ,在 网 格 中 的 适当 位 置 放 置 文 
本 内 容 。 在 画布 中 添加 “AwesomeCo” 文 本 人 信息， 代码 如 下 所 示 。 














html5_canvas/logo.html 


Context.font = "italic 40DX 'Arial'"; 
context.fillText("AwesomeCo", 60, 36); 


我 们 首先 定义 了 文本 的 类 型 大 小 及 字体 , 之 后 再 添加 文本 内 容 到 画布 中 。 通 过 使 用 fiLLText() 
方法 ， 可 以 按 先 前 设 定 的 填充 色 对 文本 进行 设置 ， 同 时 ， 我 们 在 〈60, 36 ) 的 坐标 点 位 置 添 加 文本 
言 息 ， 以 使 文本 内 容 靠 右 绘制 ， 并 位 于 大 三 角形 的 右边 以 及 线条 的 上 方 ， 如 图 6-6 所 示 。 


/ AwesomeCo 


图 6-6 
接 下 来 在 大 三 角形 内 部 绘制 方块 与 三 角形 的 组 合 图 形 。 
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6.1.3 ”移动 原点 坐标 


要 创建 方块 和 三 角形 的 组 合 图 形 ， 我 们 不 会 采用 绘制 路 径 的 方式 ， 而 是 和 完 创 建 一 个 小 方块 ， 
之 后 在 方块 上 面 放置 一 个 白色 三 角形 。 绘制 形状 和 路 径 时 ,可 以 指定 从 画布 左上 角 原 点 开始 算 起 
的 横 坐 标 和 纵 坐 标 ， 也 可 以 索性 将 原点 移动 到 新 的 位 置 上 。 这 为 我 们 绘制 新 形状 提供 了 便利 , 在 
这 种 情况 下 ， 丈 不 用 考虑 新 形状 中 各 个 点 坐标 的 换算 本。 


移动 原点 坐标 ,绘制 大 三 角形 内 部 的 小 方块 。 











html5_canvas/logo.html 


COntexXxt .save( 1) ， 
Context ,transLate(20,20) ; 
context,.fillRect(0,0,20,20): 


小 方块 位 于 大 三 角形 内 部 ， 如 图 6-7 所 示 。 


AWesomeCo 








图 6-7 
注意 在 移动 原点 之 前 ， 我 们 调用 了 save() 方 法 。 这 将 保存 当前 画布 状态 ， 以 便于 后 期 恢复 。 
这 就 像 一 个 回 深 恢 复 点 ， 你 可 以 把 它 当 作 一 个 堆栈 。 每 次 调用 save() 方 法 ， 都 会 保存 当前 状态 ， 


并 有 一 个 新 的 状态 起 点 。 当 完成 所 有 操作 时 ,我们 将 调用 restore() 方 法 ,恢复 堆栈 最 项 层 保存 
点 的 状态 。 

现在 ,通过 路 径 来 绘制 大 三 角形 内 部 、 苹 放 在 小 方块 上 方 的 三 角形 。 我 们 不 使 用 画笔 ,而 是 
重 过 填充 方法 实现 三 角形 切入 小 方块 内 的 视觉 效果 。 








html5_canvas/logo.html 


context.fillStyle = “"#FFFFFF 
context.strokeStyle = "#FFFFFF"; 


context.lineWidth = 2; 
context .beginPpath(); 
context .moveTo(O0, 20); 
context.lineTo(10, 0); 
Context .LineTIo(20，20 ); 
CoOntext .LineTofO，20 ) 


COntexXt+t .fillt{)}):; 
Context .closePath()}): 
COntext . restoref() ; 


在 画图 之 前 ， 我 们 将 画笔 色 和 填充 色 孝 设置 为 日 色 ( #FFFFFF )。 此 操作 也 黎 写 了 前 面 设 置 
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的 颜色 值 。 之 后 绘制 线条 ,由 于 前 面 移动 了 坐标 原点 ， 因 此 ,我 们 的 操作 将 相对 于 前 面 绘制 的 小 
方块 的 左上 角 ( 如 图 6-8 所 示 )。 


~" AWesomeCo 


网 6-8 
现在 就 得 到 了 一 个 完整 的 商标 ， 但 我 们 还 可 以 让 它 更 引 人 注 目 。 





6.1.4 为 对 象 设置 渐变 效果 
先 为 绘图 工具 设置 画笔 色 及 填充 色 ， 如 以 下 代码 所 示 。 








html5_canvas/logo.html 


context,fillStyle = "#FF0O000",; 
context.strokeSstyle = "#FFO000", 


接 下 来 创建 渐变 对 象 ， 并 分 配给 画笔 和 填充 对 象 。 





html5_canvas/logo_gradient.html 


var gradient = context.createLinearGradient (©, 0, 0, 40), 
gradient.addColorstop(0, "#AAQ0000"); // 上 暗 红色 
gradient.addColorstop(1, "#FFO000"); // 红色 
context.fillStyle = gradient; 

context.strokeStyle = gradient; 


我 们 创建 了 一 个 渐变 对 象 , 并 设置 渐变 色 的 终点 颜色 。 在 这 里 ,我 们 只 在 两 种 深浅 度 不 同 的 
红色 之 间 变 化 ， 但 只 要 我 们 愿意 ， 也 可 以 设置 多 种 颜色 的 渐变 〈 但 最 好 不 是 五 颜 六 色 的 ) 
要 注意 在 绘制 操作 之 前 ， 必 须 设 置 颜 色 。 


这 时 候 ， 商 标 就 算是 真正 做 好 了 ， 我 们 对 在 画布 上 绘制 简单 形状 有 了 进一步 的 认识 。 但 是 ， 
IE 9 之 前 的 版 本 不 文 持 <canvas> 标 签 。 接 下 来 考虑 回 退 方案 。 











6.1.5 回 退 方案 


Google 发 布 了 一 个 ExplorerCanvas 库 ， 可 以 让 正 用户 运行 大 多 数 使 用 <canvas> 元 系 的 应 用 程 
序 。 "写作 本 书 时 ， 该 库 最 稳定 的 版 本 为 3.0， 尚 不 能 支持 文本 添加 功能 ， 且 最 新 版 是 在 2009 年 $ 
月 发 布 的 。 从 SVN 库 里 下 载 该 版 本 ,这 个 库 在 大 部 分 情况 下 运行 良好 , 但 在 使 用 上 仍 有 一 些 限制 
(详情 请 参阅 该 库 源 代码 ) >”。 要 使 用 ExplorerCanvas 库 ， 需 要 在 <head> 区 块 中 包含 它 。 











GD http://code.google.com/p/explorercanvas/ 


@) http://explorercanvas.googlecode.com/svn/trunk/excanvas.js 
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html5_canvas/logo_gradient.html 


<!--[if lte IE 8]> 
<SCrzpt src="Javascripts/excanvas.]s"></script> 
<!f[endif]--> 


之 后 ， 在 检测 画布 的 代码 之 上 添加 以 下 代码 。 


html5_canvas/logo_gradient.html 
var canvas = document .getELementById(" Lo9o" ) ; 


> Var G vmlCanvasManager; // 有 了 这 行 ， 非 IE 浏览 器 、IE9 及 以 上 浏览 器 就 不 会 触发 错误 
> If (G vmlCanvasManager != Undefined) { // IE 8 
> G_vmlCanvasManager.initElement(canvas); 
> } 
if (canvas .getContext){ 
drawLogo () ; 
} 


这 些 代 码 强 制 将 ExplorerCanvas 库 的 行为 附加 到 <canvas> 元 系 之 上 。 在 使 用 ExplorerCanvas 
库 之 前 ， 有 时 该 库 并 不 能 很 好 地 完成 其 DOM 处 理工 作 。 如 果 使 用 了 jQuery， 并 用 drawLogo() 方 
法 取代 jQuery 的 document . ready( ) ， 就 不 需要 前 面 这 些 代 码 了 。 


经 过 上 述 改进 之 后 ， 就 可 以 在 耻 8 中 体验 画布 功能 


对 于 像 这 样 简单 的 示例 ， 我 们 也 可 以 在 <canvas> 标 签 里 放置 一 个 PNG 格 式 的 商标 图 片 ， 作 
为 回 退 内 容 。 这 样 一 来 ， 不 支持 <canvas> 的 浏览 器 就 会 显示 这 张 图 片 。 


现在 ,我 们 看 到 利用 画布 创建 简单 形状 古 多 么 简单 , 接 下 来 将 介绍 画布 的 为 一 个 功能 一 一 图 表 。 











6.2 实例 18: 使 用 RGraph 实现 图 表 统计 


画布 非常 适合 用 于 绘制 图 像 。 能 使 用 JavaScript 在 画布 上 创建 对 象 , 就 意味 着 也 能 用 画布 来 处 
理 数 据 可 视 化 。 接 下 来 ， 使 用 画布 创建 一 个 简单 的 图 表 。 


在 Web 页 面 中 绘制 图 表 有 很 多 种 方法 。 过 去 ， 开 发 者 们 一 直 使 用 Flash 来 开发 图 表 ， 但 Flash 
在 一 些 移动 设备 上 无 法 使 用 ， 如 iPad 和 iPhone。 一 些 服务 器 端 解决 方案 也 能 用 于 图 表 开 发 ， 但 在 
应 用 实时 数据 的 过 程 中 可 能 会 导致 服务 器 的 CPU 人 处 理 器 密集 计算 。 只 要 小 心 确保 在 老式 浏览 器 中 
能 够 工作 正常 , 像 画 布 这 样 基 于 标准 的 客户 并 解决 方案 就 是 一 个 很 好 的 选择 。 前 面 介绍 了 如 何 绘 
制 正 方形 , 但 想 要 绘制 更 复杂 的 图 形 就 需要 更 多 的 JavaScript 代 人 码 了 。 我 们 需要 第 三 方 图 形 库 来 帮 
助 提高 开发 效率 ， 而 RGraph 库 可 以 使 得 用 HTML5 夯 布 来 绘制 图 表 变 得 非常 简单 。?RGraph 是 纯 
JavaScript 解 决 方案 ， 因 此 ， 它 在 禁用 JavaScript 的 环境 中 无 法 工作 。 但 反 过 来 说 ， 没 有 JavaScript 
的 支持 ， 男 布 也 同样 无 法 工作 。 以 下 是 一 个 简单 柱状 图 的 示例 代码 。 














GD http:/www.rgraph.net/ 
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html5_canvas/rgraph_bar _ example.html 
<canvas width="500" height="2580" jd="test">[nNno canvas suyupport]</canvas> 


<scCript src="Javascripts/RGraph.common.]s" ></script> 
<script src="Javascripts/RGraph.bar.ijs" ></script> 


<script type="text/javascript" c 
var bar = new RGraph.Bar('test', 


bar.Set('chart.gutter', 50),; 
bar.set('chart,.colors', ['red'])}):; 
( 


harset="utf-8"»> 
' [50,25,15,10]): 


Loi OL 上 


bar.Set('chart.title’', "A bar graph of my favorite pies"); 
bar.Set('chart.labels', ["Banana Creme", "Pumpkin", "Apple", "Cherry"]1); 
bar.Draw!(); 

</script> 


我 们 要 做 的 就 是 创建 一 些 JavaScript 数 组 来 转载 数据 ， 然 后 使 用 RGraph 在 画布 中 绘制 图 表 。 
实现 效果 如 图 6-9 所 示 。 


我 最 喜欢 的 馅 饼 柱状 图 





舍 巷 奶 酷派 南瓜 派 到 果 派 樱桃 产 


图 6-9 ”使 用 画布 实现 的 客户 端 柱状 网 








AwesomeCo 公 司 正 在 更 新 公司 网 站 , 高 官 们 想 看 到 各 个 主流 浏览 硕 所 读 来 的 网 站 流量 分 布 情 
况 。 后台 程 序 员 可 以 随时 获取 该 数据 , 但 首先 他 们 希望 我 们 能 够 想 出 一 种 在 浏览 各 端 呈现 图 表 的 
方 宁 ， 因 此 提供 给 我 们 一 些 测 试 数据 。 我 们 接 下 来 就 利用 这 些 测试 数据 来 生成 图 表 。 


6.2.1 使 用 HTML 描 述 数 据 


可 以 使 用 JavaScript 来 硬 编码 浏览 妖 的 统计 值 ， 但 只 有 开启 JavaScript 支 持 的 用 户 才 能 看 到 这 
些 值 。 因此, 我 们 把 这 些 值 作为 文本 放 在 页 面 中 。 之 后 可 以 通过 JavaScript 该 取 这 些 数 据 并 应 用 到 
RGraph 图 形 库 上 。 


html5_canvas/canvas_graph.html 


<div id="graph data'"> 
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<hl>Browser share for this site</h1> 
<UL> 
<LIL> 
<p data-name= ' 5afarz data-percent="10"> 
Safari - 10% 
</p> 
</1i> 
<li> 
<p data-name="Internet Explorer" data-percent="30"> 
Internet Explorer - 30% 
</p> 
</1i> 
<LIL> 
<p data-name="Firefox" data-percent= "了 2 "> 
Firefox - 1l15% 
</p> 
</1i> 
<LIL> 
<p data-name="Google Chrome" data-percent="45"> 
Google Chrome - 45% 
</p> 
</1i> 
</ul> 
</div> 


我 们 使 用 HTML5 数 据 属性 存储 浏览 器 名 称 及 百 分 占 比 。 虽 然 描 述 了 文本 信息 ， 但 由 于 我 们 
不 必 解 析 字 符 串 ， 所 以 ， 通 过 可 编程 方式 实现 本 例 功 能 要 容易 得 多 。 

图 6-10 表 明 ， 即 使 没有 图 表 功 能 支持 ,图表 数 据 也 能 很 好 地 显示 并 具备 一 定 可 读 性 。 这 就 是 
无 法 使 用 <canvas> 标 签 或 JavaScript 的 移动 设备 及 用 户 的 回 退 方案 。 








各 个 痢 蜗 如 有 的 网 站 流量 分 布 


® Satari- 10% 
Internet Explorer - 30% 


s Firetox - 15%i 





{oogle Chrome - 43% 
图 6-10 ” HTML 描述 的 图 表 数 据 
现在 ， 利 用 数据 属性 来 创建 图 表 。 
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6.2.2 ”将 HTML 描 述 内 容 转 换 成 柱状 图 


我 们 要 提供 一 个 柱状 图 ， 因 此 ， 丰 加载 RGraph 核 心 库 的 同时 ， 还 要 加 和 载 RGraph 柱 状 图 库 。 
此 外 ， 还 要 通过 jQuery 获取 文档 中 的 数据 。 接 下 来 ， 创 建 javascripts/graph.js 文 件 ， 并 编写 图 表 实 
现代 码 。 


在 </body> 闭 标签 之 前 加 载 各 种 库 。 














html5_canvas/canvas_graph.html 

<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery .min.Js"> 

</script> 

<script src="javascripts/RGraph.common.]s" ></script> 

<Script src="javascripts/RGraph.bar.]js" ></script> 

<SCript src="javascripts/graph.]js" ></script> 


要 创建 图 表 ， 就 要 从 HTMIL 文 档 中 获取 图 表 标 题 、 标 签 说 明 以 及 数据 ， 并 将 这 些 信息 传递 给 
RGraph 库 。RGraph 将 标签 及 数据 存放 在 数组 中 。 我 们 可 以 通过 jQuery 快速 创建 这 些 数组 。 
javascripts/graph.js 文 件 中 编写 以 下 代码 。 


[下 
了 准 


html5_canvas/javascripts/graph.js 
Line1 var canvasGraph = function(){ 
var title = $('#graph data hl1').text(); 
var labels = $("#graph data>ul>li>pldata-name]").map(function()t{ 
- return this.getAttribute("data-name"); 
59 7) 
- Var percents = $("#graph data>ul>li>p[data-percent]").map(function(){ 
return parseInt(this.getAttribute("data-percent")); 
} 
- var bar = new RGraph.Bar('browsers', percents),; 
10 bar.Set('chart.gutter', 50); 
bar.Set('chart,colors', ['red'|]); 
bar.Set('chart.title', title); 
bar.Set('chart, labels', labels); 
- bar .Draw(); 
15 $('#graph data').hide(); 
Se 


首先 ， 在 第 2 行 获 取 图 表 抬 头 文本 信息 。 接 下 来 ， 在 第 3 行 获取 所 有 让 有 data-name 数 据 属性 
的 元 系 。 通 过 jQuery 的 map ( ) 方 法 将 这 些 元 素 的 data-name 数 据 属 性 值 转换 到 一 个 数组 中 。 
第 6 行 ， 按 照 同样 的 方式 获取 百 分 占 比 ， 并 生成 百 分 占 比 数 组 。 


第 7 行 ， 强 制 转换 data-percent 数 据 属性 值 为 整 型 。 我 们 也 可 以 使 用 jQuery 的 data( ) 方 法 ， 
读 取 HTML5 的 数据 属性 并 自动 转换 数据 属性 值 为 合适 的 数据 类 型 。 


完成 数据 整理 后 ， 用 RGraph 绘 制图 表 就 变 得 很 容 史 了 。 效 末 如 图 6-11 所 未 。 
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各 个 训 蜗 尼 的 网 站 疲 量 分 布 


Safari Internet Explorer Firefox Google Chrome 








图 6-11 通过 画布 呈现 出 来 的 图 表 


6.2.3 显示 替代 内 容 


对 于 6.2.1 方 中 的 HTML5 描 述 内 容 ， 可 以 把 内 容 处 理 代码 放 在 <canvas> 标 签 中 。 这 将 在 文 持 
canvas 元 系 的 浏览 硕 中 隐藏 相应 的 描述 内 容 元 系 ， 而 在 不 文 持 canvas 元 素 的 浏 览 需 中 显示 这 些 
内 容 元 素 。 然 而 这 样 会 存在 一 个 问题 : 如 条 用 户 的 浏览 硕 文 持 canvas 元 素 却 芭 ee 
描述 内 容 元 素 也 会 被 隐藏 起 来 ; 同时 ,由 于 禁用 了 JavaScript， 导 致 图 表 也 无 法 显示 ， 这 时 候 就 既 
看 不 到 摘 述 内 容 ， 又 看 不 到 网 表 。 


我 们 把 HTML5 描 述 内 容 放 在 <canvas> 标 签 外 部 , 然后 在 检测 到 浏 览 融 文 持 canvas 元 素 的 情 
况 下 ， 就 通过 jQuery 隐藏 HTML5 描 述 内 容 (在 禁用 JavaScript 的 情况 下 ， 通 过 jQuery 隐藏 HTML5 
描述 内 容 的 代码 根本 不 会 起 作用 ， 所 以 ， 这 时 候 HTML5 描 述 内 容 还 是 显示 的 )。 我 们 使 用 标准 的 
JavaScript 代 码 而 非 Modernizr 库 来 检测 浏览 器 对 canvas 元 素 的 支持 情况 ， 因 为 这 很 容易 实现 。 




















html5_canvas/javascripts/graph.js 
Var canvas = document .getElementByld('browsers'); 
If (canvas.getContext)t{ 

canvasGraph(); 


} 


过 上 述 代 码 实现 ,我 们 的 图 表 就 完成 了 (但 还 无 法 在 不 支持 <canvas> 标 签 的 浏览 姨 中 
工作 


6.2.4” 回 退 方 案 
在 创建 方案 之 时 , 我 们 已 考虑 了 可 访问 性 及 禁用 JavaScript 场 景 下 的 回 退 方案 , 但 图 表 目 前 还 
无 法 在 IE 8 中 显示 ， 因 为 IE 8 并 不 文 持 <canvas> 标 签 。 


ExplorerCanvas 库 (参见 6.1.5 市 ) 和 RGraph 可 以 很 好 地 结合 使 用 。 只 需 在 <head> 中 添加 
ExplorerCanvas 库 〈excanvas.js ) 的 引用 , 图 表 就 可 以 在 正 8 里 正常 工作 了 。 然 而， 如果 过 到 了 IE7 














一 
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或 更 老 的 版 本 ， 承 不 得 不 考虑 别 的 符 代 方案 了 。 


另外 ， 由 于 ExplorerCanvas 库 需要 在 <head> 中 添加 ， 因 此 ， 如 果 以 错误 顺序 加 载 它 ， 有 时 会 
引起 冲突 。 在 我 们 的 例子 中 ，ExplorerCanvas 会 修改 DOM, 但 并 不 总 是 按 我 们 所 希望 的 那样 及 时 
修改 。 有 两 种 方式 来 避免 这 种 情况 : (1) 使 用 6.1.5 节 回 退 方案 里 的 配置 方式 ， 强 制 ExplorerCanvas 
识别 canvas 元 素 ; (2) 通过 jQuery 的 $(document ) . ready ( ) 方 法 调用 canvasGraph () 因数 。 这 将 
确保 JavaScript 代 码 可 以 真正 控制 文档 。 我 们 已 经 使 用 了 jQuery, 因此 , 只 需 对 代码 稍 作 调 整 即 可 。 

















html5_canvas/javascripts/graph.js 


> $(document) .ready(function( ){ 
var canvas = document .getELementById(' prowsers ') 
if (canvas.getContext)t{ 
canvasGraph( ); 


} 
~») 


现在 ， 程 序 在 IE 8 上 也 能 够 运行 正常 了 1 

使 用 画布 技术 有 一 个 额外 的 好 处, 它 让 我 们 一 开始 就 考虑 回 退 方案 , 而 不 用 到 最 后 再 来 补充 
些 什么 。 这 可 以 大 大 提高 应 用 的 可 访问 性 。 本 例 中 讨论 的 思路 对 图 表 数 据 而 言 ， 极 具 可 访问 性 ， 
并 日 是 非常 通用 的 方法 。 你 可 以 像 基 于 文本 的 处 理 方案 那样 ,轻松 创 建 可 视 化 展现 方案 。 通 过 可 
视 化 图 表 ， 任 何人 都 能 理解 你 所 分 享 的 重要 数据 。 

接 下 来 ,我们 来 了 解 一 种 完全 不 同 的 、 在 浏览 需 中 绘制 图 像 的 方法 。 




















6.3 实例 19: 使 用 SVG 绘制 矢量 图 形 


我 们 并 不 局 限于 只 在 画布 中 绘制 图 形 。HTML5 文 档 还 支持 可 缩放 矢量 图 形 〈Scalable Vector 
Graphics，SVG )，SVG 并 不 使 用 JavaScript 来 绘制 线条 或 形状 ， 而 是 通过 XML 来 定义 线条 、 曲 线 、 
同形 、 和 矩形 以 及 多 边 形 。SVG 生 成 的 图 形 是 真正 的 矢量 图 形 ， 也 就 是 说 ， 和 位 图 这 样 的 像素 成 像 
技术 不 同 ，SVG 通 过 公式 来 定义 线条 或 其 他 形状 。 这 也 意味 看 区 别 于 通过 画布 绘制 的 位 图 , 我们 
可 以 任意 缩放 矢量 图 形 而 不 会 降低 画面 清晰 度 和 品质 。 


接 下 来 学 习 SVG 绘 图 技术 ， 我 们 将 使 用 SVG 的 XML 语法 重新 绘制 之 前 完成 的 AwesomeCo 公 
司 商标 〈 位 图 版 )。 


首 和 爷 ， 创 建 一 个 侧 单 的 HTML 结 构 页 面 ， 其 中 放置 一 个 <svg> 元 系 。 

















html5_svg/index.html 
<IDOCTYPE htmt> 
<html Lang=' em ' > 
<head> 
<meta charset="utf-8"> 
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<title>AwesomeCo Logo Test</title> 
</head> 
<body> 
<script type="image/svg+xml"> 
<SVg ld="awesomeco iogo" width="900" height="80"> 
</SVg> 
</script> 
</body> 
</html> 


我 们 在 使 用 image/svg+xml 内 容 类 型 的 <script> 标 签 内 定义 <svg> 标 签 。 这 将 确保 在 浏览 如 
解析 HTML 页 面 元 素 时 忽略 SVG 内 容 。 在 <svg> 标 签 内 还 指定 了 SVG 元 系 的 高 度 和 宽度 。<svg> 
开 闭 标签 之 间 放 置 的 是 用 于 定义 图 像 的 XML ( 后面 会 创建 它 )。 








6.3.1 绘制 线条 


先 来 绘制 文本 信息 下 面 的 主线 条 。 通 过 画布 绘制 线条 时 ,我 们 采用 的 是 路 径 绘制 的 方式 ， 而 
在 SVG 中 ， 则 使 用 <polyline> 元 素来 创建 带 角 度 的 线条 。 通 过 以 下 代码 ， 可 以 生成 一 个 带 角 度 
的 主线 条 。 





html5_svg/index.html 
<polyline id="iine" 
points="0, 40 30,0 60,40 285,40" 
style="fill:none;stroke:rgb(255,0,0);stroke-width:2"> 
</polyline> 
正如 画布 一 样 ，SVG 绘 图 方式 也 是 以 坐标 轴 为 基础 ， 其 左上 角 为 (0, 0) 坐 标 。 我 们 通过 
<poLyLine> 元 素 绘制 线条 ， 并 指定 了 一 系列 的 点 。 从 (0, 40) 坐 标点 位 置 开 始 ， 之 后 移动 到 (30, 0) 
坐标 点 , 这 样 就 创建 了 线条 的 第 一 部 分 。 然 后 移动 到 (60, 40) 坐 标点 , 最 后 结束 于 (285, 40) 坐 标点 。 





我 们 同时 设置 了 style 属 性 , 以 设置 线条 的 画笔 宽度 和 颜色 。 运行 代码 , 绘制 的 线条 如 图 6-12 
所 示 。 
图 6-12 


接 下 来 ， 染 加 文本 信息 。 


6.3.2 ”添加 文本 信息 


使 用 <text> 标 签 定义 所 放置 的 文本 信息 。 通 过 市 有 相同 前 绥 名 称 “font-” 的 属性 指定 字体 
系列 、 大 小 、 样 式 以 及 粗细 等 属性 值 。 


在 <text> 标 签 中 ,放置 <tspan> 元 素 以 创建 实际 文本 块 。 通过 设置 <tspan> 元 素 的 x 和 y 属 性 
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来 设置 它 的 位 置 ， 并 在 <tspan> 开 闭 标 签 中 放置 需要 显示 的 文本 内 容 。 编 写 如 下 代码 ， 让 文本 内 
容 按 照 我 们 希望 的 方式 呈现 出 来 。 


html5_svg/index.html 
<text jd="AwesomeCo" 
fill="rgb(255,0,0)" 
font-family="Ariat" font-size="40" 
font-style="italic" font-weight="normal"> 
<tspan x="60" y="36" fill="rgb(255,0,0)">AwesomeCo</tspan> 
</text> 


文本 在 商标 的 恰当 位 置 上 呈现 了 出 来 ， 如 图 6-13 所 示 。 








图 6-13 


接 下 来 ,绘制 大 三 角形 内 部 的 小 方块 。 


6.3.3 ”绘制 形状 


SVG 定义 了 圆 形 、 椭 圆 ， 旋 至 不 规则 的 多 边 形 。 在 这 里 ， 需 要 一 个 正方 形 , 因此， 我 们 通过 
<rect> 标 签 来 实现 它 。 要 创建 正方 形 ， 需 要 先 指 定 其 坐标 以 及 宽度 和 高 度 。 











html5_svg/index.html 

<rect jd="sgquare" 
x="20" y="20" height="20" width="20" 
style="fill:rgb(255,0,0)"></rect> 


如 之 前 使 用 <poLyLine> 元 素 那 样 , 我 们 通过 style 属 性 定义 了 画笔 及 填充 样式 。 这 样 , 我 们 
的 商标 就 成 型 了 (如 图 6-14 所 示 )。 


/AwesomeCo 
图 。6-14 


现在 ， 只 剩 下 一 个 日 色 小 三 角形 吸 待 完成 。 





6.3.4 通过 路 径 进 行 手 工 绘制 


可 以 使 用 <potygon> 标 签 定义 一 个 三 角形 ， 但 在 这 里 ， 我 们 将 使 用 与 前 面 在 <canvas> 版 商 
标 上 绘制 三 角形 时 相似 的 方式 。 这 种 方法 和 <canvas> 版 中 的 方法 非常 类 似 ， 不 同 之 处 在 于 
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<canvas> 版 通过 一 系列 步骤 进行 路 径 绘 制 ， 而 在 SVG 中 ， 我 们 把 动作 和 坐标 点 结合 起 来 逐个 放 
和 坐标 数组 中 ， 数 组 元 系 间 以 空格 隔 开 。 这 跟前 面 定 义 <poLyLine> 元 素 时 的 做 法 很 相似 。 


通过 d 属 性 来 定义 如 何 绘制 线条 。 先 定义 线条 的 起 点 ， 之 后 连接 线条 中 的 每 个 点 。 由 于 所 绘 
制 的 是 三 角形 ， 绘 制 过程 将 在 起 点 处 结束 ， 以 将 最 后 一 个 点 与 第 一 个 点 相连 ,代码 如 下 所 示 。 











html5_svg/index.html 
<path jd="Triangle" 
d="M20, 40 L360,20 L4060,40 Z M20,40" 
fill="rgb{255,2355,255)"></path> 
我 们 使 用 M 移 动 到 起 点 处 。 使 用 L 指 定 线 条 中 的 某 个 点 ， 并 通过 Zz 关闭 路 径 ， 这 就 表明 起 点 跟 
终点 连接 起 来 了 ,以 便 填充 形状 内 容 。 可 以 把 这 些 操作 想像 成 前 面 的 “ 连 点 ”游戏 。 移 动画 笔 到 
起 点 上 ， 然 后 连 线 到 下 一 个 点 ， 以 此 类 推 。 


编码 完成 后 ， 最 终 的 商标 效 灯 如 图 6-15 所 示 。 


A AWesomeCo 


图 6-15 


这 里 的 实现 代码 下 接 舱 入 到 HTML 文 档 中 ， 实 际 上 ，SVG 文 件 不 必 这 样 做 。 它 可 以 以 外 部 文 
件 的 形式 存在 ， 只 要 训 览 硕 文 持 ， 甚 至 可 以 像 在 CSS 中 加 载 痛 景 图 片 那样 加 载 它 。 


SVG 与 画布 这 两 种 绘图 技术 虽然 很 相似 , 但 有 了 SVG 绘图 技术 , 我 们 也 就 拥有 了 在 独立 文件 
中 定义 图 像 并 把 文件 加 载 到 HTML 文 档 的 能 力 。 这 个 特性 赋予 我 们 很 大 的 灵活 度 。 然 而 ， 跟 画布 
绘图 拉 术 一 样 ， SVG 绘 图 技术 也 不 是 一 种 可 编程 方式 。 它 更 适合 用 于 商标 及 非 动态 内 容 ， 而 画布 
图 像 更 适合 于 游戏 。 和 擎 握 这 两 种 绘图 技术 后 ， 你 可 以 不 断 控 索 ， 找 出 最 适合 你 的 方式 。 

















6.3.5 回 退 方案 
不 支持 SVG 图 像 的 浏览 器 可 以 使 用 很 多 回 退 方案 。 其 中 最 简单 的 就 是 SVG Web”， 它 提供 了 
SVG 1.1 的 部 分 支持 ， 并 通过 Flash 技 术 来 呈现 SVG 图 像 。 


要 使 用 SVG Web ， 需 要 先 下 载 它 并 把 svg.js 及 svg.Swf 文 件 放 在 javascripts 目 录 中 。 之 后 在 Web 
页 面 的 <head> 部 分 通过 <script> 标 签 加 载 svgjs， 代 人 码 如 下 所 示 。 














html5_svg/index.html 


<script src=" javascrIipts/sVv9. Js" data-path="Javascripts"></script> 


这 样 ， 我 们 的 回 退 方 案 就 能 发 挥 作用 了 。 


GD https://code.google.com/p/svgweb/ 
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6.4 ”未 来 展望 


掌握 一 些 画 布 绘图 技术 之 后 ， 你 可 以 进一步 探索 其 他 用 法 。 还 可 以 通过 这 些 方法 并 借助 
Impact 或 者 Crafty 等 库 来 创建 游戏 ,或 者 创建 媒体 播放 右 界 面 以 及 增强 型 相册 等 应 用 。 使 用 画 
布 绘图 ， 所 需要 的 只 是 一 点 JavaScript 代 码 以 及 一 点 想象 力 。 随 着 浏览 锅 对 HTMLS 的 文 持 越 来 越 
广泛 ，HTML5 的 绘图 性 能 及 速度 必 将 不 断 增 强 。 

但 是 ，2D 绘 图 不 应 该 是 画布 绘图 技术 发 展 的 终点 。HTML5 夯 布 规范 同样 也 支持 3D 图 像 ， 浏 
览 硕 厂商 也 正在 实现 便 件 加 速 功能 。 男 布 让 仅 用 JavaScript 技 术 就 能 开发 出 迷人 的 用 户 界 面 及 游戏 
成 为 可 能 。 可 深入 人 研究 D3 库 ( 李 松 峰 译 ，http://www.ituring.com.cn/book/1126 )， 看 看 还 可 以 实现 
哪些 惊艳 的 效果 。”” 


对 于 SVG 绘 图 技术 ，Raphaél 这 样 的 库 能 够 帮助 开发 者 创建 强大 上 且 跨 浏览 带 文 持 的 可 视 化 界 
面 及 图 像 。 最 重要 的 是 ， 像 Adobe Illustrator 这 样 的 工具 能 够 帮助 你 把 矢量 图 导出 为 一 个 可 用 于 
Web 项 目的 SVG 文件 。 随 春 对 SVG 技术 的 文 持 能 力 不 断 提升 ， 创 建 能 够 随 设 备 扩 才 比 例 缩放 的 图 
像 都 将 变 得 更 容易 。 全 世界 有 那么 多 的 用 户 需 要 交替 使 用 小 的 手机 屏 颖 和 大 的 桌面 屏 硕 ,， 有 这 人 么 
一 种 按 比例 放大 或 综 小 午 不 会 失真 的 图 像 存 在 ， 真 是 太 好 了 ! 














GD http://impactjs.com/ 

@) http://craftyjs.com/ 

(3) http://threejs.org/ 

@ 想 要 了 解 D3 库 ,推荐 阅读 《数据 可 视 化 实战 : 使 用 D3 设计 交互 式 图 表 》( 人 民 邮 电 出 版 社 ，2013 年 6 月 ) 一 书 ， 
链接 为 http:/www.ituring.com.cn/book/1126。 一 一 译 者 注 

(5) http://raphaeljs.com 





萨 入 首 频 和 视频 





音频 和 视频 是 现代 互联 网 发 展 过 程 中 不 可 或 缺 的 要 素 。 播 客 、 音 频 预 览 以 及 视频 教程 等 相关 
应 用 随处 可 见 。 但 直到 几 年 前 , 有 了 Flash 等 浏览 右 插 件 技术 的 支持 , 音频 和 视频 技术 才 真 正 得 以 
应 用 。 在 本 章 中 ， 我 们 将 介绍 HTML5 中 新 的 首 频 和 视频 支持 功能 ， 相 关 方 法 不 仅 可 以 般 入 音频 
和 视频 内 容 至 页 面 中 ， 还 能 确保 老式 浏览 紫 用 户 及 残障 人 十 也 能 够 使 用 。 

本 章 将 讨论 以 下 HTML5 新 特性 。 








口 <audio> (<audio src="drums .mp3"></audio> ): 浏览 器 原生 支持 的 音频 播放 功能 ( C4、 
F3.6、. S3.2、 IE9、 O10.1、 i0OS3、A2), 

口 <video> ( <video src="tutorial.m4v"></video> ): 浏览 器 原生 支持 的 视频 播放 功能 
(C4 F3.6. S3.2、 IE9、 O10.5、iO0S3、A2), 

DQ <source> (<source src="video/h264/01 blur .mp4" type='video/mp4'> ): 指定 
音频 或 视频 的 来 源 文 件 (C4、F3.6、S3.2、 IE9、0O10.5、iOS3、A2) 

口 <track>: 为 视频 提供 字幕 或 提示 点 (C18、S6.1、IE 10)。 


了 解 新 特性 之 前 ， 我 们 乞 来 回顾 一 下 音频 和 视频 的 Web 发 展 史 。 毕 竞 ， 只 有 和 匈 了 解 了 历史 ， 
才能 对 目标 有 更 清晰 的 认识 。 














7.1 历史 回顾 


长 期 以 来 ， 人 们 一 直 在 人 研究 如 何在 Web 页 面 上 更 好 地 提供 音频 和 视频 支持 。 起 初 ， 人 们 在 主 
页 中 航 入 MIDI 或 者 MP3 文 件 ， 并 使 用 <embed> 标 签 引用 这 些 文件 ， 如 以 下 代码 所 示 。 


<embed src="awesome,mp3" autostart="true" 
loop="true" controller="true"></embed> 


<embed> 标 签 从 未 成 为 标准 ， 因 此 ， 人 们 就 开始 用 <object> 标 签 取 代 它 。<object> 标 签 是 
一 个 公认 的 W3C( 万 维 网 联盟 ) 标 准 , 老式 浏览 絮 并 不 支持 这 个 标签 ,所 以 你 经 常会 看 到 <object> 
标签 里 舱 套 了 一 个 <embed> 标 签 ， 如 下 所 示 。 


<object> 
<param name="src" valuyue="simpsons.mp3"> 
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<param name="autoplay" value="false"> 

<param name="controller" value="true"> 

<embed src="awesome.mp3" autostart="false" 

loop="false" controller="tryue"></embed> 

</object> 

然而 , 并 非 每 个 浏览 如 者 能够 正 第 运行 这 段 代码 , 也 不 是 所 有 的 服务 大都 能 得 到 正确 配置 ， 
并 为 浏览 各 问 代码 的 正常 运行 提供 民 好 文 持 。 随 着 Web 上 的 视频 应 用 日 趋 流 行 ， 事情 楼 得 更 加 
复 洒 起来。 在 Web 领 域 ， 我 们 历经 了 太 多 的 音频 及 视频 播放 格式 ， 从 RealPlayer 到 Windows 
Media、 再 到 QuickTime。 每 个 公司 都 有 自己 的 视频 战略 ， 似 乎 每 一 个 Web 站 点 都 会 使 用 不 同 的 
钢 频 编码 方式 和 格式 。 这 就 为 开发 者 和 内 容 制 造 商 市 来 了 抹 烦 ， 而 对 普通 用 户 而 言 ， 这 人 简直 是 
路 梦 ! 

Macromedia 公 司 (已 被 Adobe 公 司 收购 ) 时 就 意识 到 它 的 Flash Player 可 以 成 为 跨 平 人 台 分 发 音 
频 及 视频 内 容 的 完美 解决 方案 。Flash 曾 在 桌面 Web 浏 览 器 的 音频 及 视频 播放 市 场 中 获得 近 97% 的 
占有 这 ,一 旦 内 容 制 造 商 发 现 他 们 的 内 容 只 和 需 编 码 一 次 就 可 以 到 处 播放 , 成 干 上 万 网 站 的 首 频 及 
视频 解决 方 宁 就 都 转向 了 Flash 流 媒体 技术 。 


2007 年 , 乎 果 公 司 诀 定 不 绸 在 它们 的 产品 记 hone 和 iPod Touch( 以 及 后 面 的 iPad ) 中 支持 Flash。 
因为 i9S 平 台 的 广泛 流行 ,许多 主流 内 容 提供 商 ， 包 括 YouTube， 纷 纷 采 取 措 施 保证 视频 内 容 可 
以 在 iOS 的 Safari 浏 览 各 中 正常 播放 。 这 些 视频 应 用 采用 了 H.264 编 解码 技术 ， 该 搁 术 既 支 持 和 常用 
的 Flash Player， 义 允许 内 容 提 供 商 针对 多 平台 支持 仪 需 编 码 一 次 。 


HIMLS 规 范 的 制定 者 认为 浏览 套 应 该 原生 提供 音频 和 视频 文 持 ， 而 不 是 依靠 需要 一 推 
HTML55 引 用 代码 的 浏览 器 插件 来 满足 调用 请 求 , 浏 览 絮 应 该 把 音频 和 视频 支持 功能 当 作 Web 内 容 
领域 的 “一 等 公民 ”， 就 像 前 面 讨论 的 静态 图 像 那样 。 接 下 来 ， 在 介绍 如 何在 页 面 中 骨 入 音频 及 
视频 之 前 ， 我 们 先 来 讨论 一 下 有 关 的 音频 及 视频 格式 。 
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谈 及 Web 上 的 视频 应 用 ， 实 际 上 有 是 指 容 融 及 编 解 码 胡 技术 。 你 可 能 会 把 从 数码 相机 里 导出 的 
AVI 或 MPEG 文 件 当 作 视 频 , 但 这 种 想法 未 免 过 于 简单 。 容 融 就 像 一 个 信封 ,用 来 封 阎 音频 流 、 视 
频 流 ， 以 及 第 用 的 附加 元 数据 ( 如 副标题 ) 这 些 首 频 及 视频 流 需 要 进行 编码 ， 这 就 是 编 解 公 右 的 
用 途 所 在 。 首 频 和 视频 编码 方式 多 达 数 百 种 ,但 天 乎 HTML5 首 频 和 视频 支持 的 只 有 密 密 几 种 。 





7.2.1 视频 编 解码 器 

当 你 观看 一 个 视频 ,视频 播放 器 必须 对 视频 进行 解码 。 不幸 的 是 ， 由 于 有 些 视频 使 用 了 播放 
器 不 支持 的 其 他 格式 进行 编码 , 那么 相应 的 ,你 的 播放 器 也 就 无 法 对 其 进行 解码 ， 因 此 你 也 就 无 
法 观看 此 类 视频 了 。 某 些 播放 器 通过 软件 解码 视频 ， 这 种 方式 导致 播放 速度 变 慢 ， 且 增加 了 CPU 
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的 密集 计算 ,但 却 能 够 文 持 更 广泛 的 各 种 格式 。 其 他 的 一 些 播放 融 使 用 便 件 解码 硕 ， 因 此 对 视频 
格式 有 特定 限制 。 现 在 ， 如 果 你 想 在 工作 中 开始 尝试 HTMLS5 的 标签 ， 你 就 需要 了 解 三 大 流行 视 
频 格式 : H.264、Theora 以 及 VP8。 这 些 格 式 相互 间 都 有 一 些 不 同 , 并 且 很 不 季 ， 各 家 的 浏览 名 又 
分 别 支 持 不 同 的 格式 。 





视频 编 解 码 器 浏览 器 支持 
H.264 C3 F21 (Windows 7+) 、S4、IE9、ioOS 
Theora F3.5、 C4、 O10 
VP8 C5、F4、S 6 和 IE 9( 如 果 安 装 了 编 解 公关 ) 、O 10.7 
1. H.264 





H.264 是 一 个 高 品质 视频 编 解 码 器 ， 由 MPEG 专 家 组 创建 ， 并 于 2003 年 实现 标准 化 。 为 了 距 
能 文 持 移动 电话 这 样 的 低 画 质 或 低频 宽 设 备 ， 又 能 在 高 画 质 设备 上 处 理 视 频 ，H.264 规 范 被 划分 
为 多 个 配置 部 分 ， 所 有 配置 共用 一 僚 公 共 特 性 , 但 高 端 配置 标准 提供 了 提升 品质 的 附加 条 球 。 例 
如 ，iPhone 和 Flash Player 都 可 以 播放 按 H.264 标 准 编 码 的 视频 ， 但 最 初 的 iPhone 只 文 持 低 品 质 的 
baseline 配 置 ， 而 Flash Player 则 文 持 高 品质 的 流 媒体 。 还 可 以 对 视频 进行 一 次 编码 并 磐 人 多 个 配 
置 ， 以 实现 多 平台 文 持 。 


由 于 得 到 了 微软 及 苹果 的 支持 ( 这 两 家 公司 都 获得 了 使 用 许可 )，H.264 已 成 为 一 个 约定 俗 成 
的 标准 。 此外, Google 的 YouTube 将 其 视频 转换 为 H.264 标 准 , 以 支持 OS 平台; Adobe 的 Flash Player 
本 就 文 持 H.264 人 标准 。 但 是 ， 也 .264 标 准 并 不 是 一 个 开放 的 技术 。 它 需要 专利 授权 ， 并 受 限 于 许可 
证 有 效 期 。 内 容 制造 商 在 使 用 H.264 进 行 视频 编码 时 必须 缴纳 一 部 分 版 税 ， 但 这 些 版 税 并 不 针对 
那些 免费 提供 给 最 终 用 户 的 内 容 。” 


目 由 软件 支持 者 担心 专利 持 有 者 最 终 会 癌 内 容 制 造 商 收 取 蜗 额 版 税 , 这 种 担心 促成 了 耕 代 的 
编 解 码 表 技术 的 发 展 。 


2. Theora 


Theora 是 由 Xiph.org 基 金 会 开发 的 一 个 人 免 版 税 的 编 解 码 问 技术 标准 。 虽 然 内 容 提 供 商 通过 
Theora 编 解码 大 技术 标准 创建 出 来 的 视频 品质 可 以 跟 通 过 H.264 创 建 出 来 的 视频 相 媲 美 , 但 是 设 
备 制 造 商 对 Theora 编 解码 融 技 术 标 准 的 文 持 进 程 比 较 绥 慢 。Firefox 、Chrome 以 及 Opera 的 各 个 平 
台 版 本 都 可 以 无 需 借 助 其 他 软件 ， 直 接 播放 通过 Theora 编 码 的 视频 ， 但 IEE、Safari 以 及 iOS 设 备 并 
不 支持 Theora 标 准 。 蔷 果 和 微软 都 比较 担心 潜水 艇 专利 ( submarine patent ) 指 专利 申请 者 故 
意 延 到 专利 成 立 ,， 使 其 长 期 处 于 未 公开 状态 ， 等 竺 利用 其 技术 产品 的 广泛 普及 。 符 时 机 成 束 ， 专 
利 申请 者 就 浮现 出 来 , 并 开始 回 训 无 戒心 的 市 场 开刀 , 索要 巨额 专利 费用 。 因 为 这 个 因素 , Theora 
就 没有 流行 起 来 ， 并 逐 潮 为 VP8 格 式 所 取代 。 
















































































GD http://www.reelseo.com/mpeg-la-announces-ave-h264-free-license-lifetime/ 
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3. VP8 


Google 的 VP8 是 一 个 开放 的 编 解码 硕 技 术 标准 ， 甚 品质 与 H264 标 准 相 当 。 目 前 ，Mozilla、 
Chrome 、Opera 都 文 持 VP8 标 准 。 男 外 ， 只 要 用 户 事 先 安装 了 相应 的 编 解码 妖 ，Safari 6 以 及 IE 9 
也 可 以 支持 该 标准 。 同 时 ，Adobe 的 Flash Player 也 将 VP8 标 准 作 为 一 个 合适 的 替代 方案 而 给 予 支 
持 。 iOS 设 备 的 Safari 则 不 支持 VP8 标 准 , 这 样 就 意味 者 尽管 这 个 编 解 码 右 技术 是 免费 提供 使 用 的 ， 
但 内 容 提 供 商 要 想 在 iPhone 或 Pad 上 分 发 视频 内 容 就 必须 使 用 H.264 编 解码 硕 技 术 。 此 外 ，VP8 还 
可 能 侵犯 了 跟 H.264 编 解码 器 技术 标准 相关 的 一 些 专利 。” 











7.2.2” 首 频 编 解码 器 


好 像 视频 标准 的 对 立 情况 还 不 够 复杂 ,好 吧 ， 我 们 还 得 继续 面 对 首 频 标准 的 对 立 情况 。 各 种 
音频 标准 及 所 文 持 的 浏览 硕 情 况 如 下 。 





音频 编 解 码 器 浏览 器 支持 

AAC S4、C3、105S 

MP3 C3、S4、 IE9、 10S 
Vorbis ( OGG ) F3、C4、010 


1. 高 级 音频 编码 (AAC) 


这 是 立 果 公司 在 其 iTunes 商 店 里 使 用 的 音频 格式 。 在 大 小 相仿 的 情况 下 ， 该 格式 相 比 MP3 有 
大 更 好 的 首 质 ， 它 提供 了 多 个 首 频 配置 文件 ， 这 点 跟 H.264 类 似 。 它 与 H.264 的 为 一 个 相似 之 处 就 
是 ， 该 格式 也 不 是 免费 的 编 解 码 融 技术， 并 有 相关 的 许可 费用 。 


所 有 的 苹果 产品 都 支持 AAC 格 式 文件 。Adobe 的 Flash Player 以 及 开源 的 VLC 播 放 器 也 支持 该 
格式 。 

2. MP3 

MP3 格 式 尽 管 非 常 流行 ， 但 受 专 利 所 限 ， 仍 无 法 得 到 Firefox 和 Opera 浏 览 右 的 支持 。Safari 以 
及 Chrome 则 支持 它 。 

3. Vorbis (OGG) 


这 是 个 开源 上 且 免 版 税 的 格式 ，Firefox 、Opera 以 及 Chrome 都 文 持 该 格式 。 也 可 以 将 Vorbis 与 
Theora 及 VP8 视 频 编 解码 器 技术 一 同 使 用 。Vorbis 文 件 具 有 非常 好 的 音质 ， 但 并 未 得 到 音乐 播放 
稚 便 件 设 备 的 广泛 文 持 。 

视频 编 解 但 带 以 及 音频 编 解 但 硕 需 要 打包 到 一 起 来 分 发 和 播放 。 我 们 来 讨论 一 下 视频 容 人 天 。 

















GD http://www.fosspatents.com/2013/03/nokia-comments-on-vp8-patent.html 
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7.2.3 ”容器 与 编 解码 器 协同 工作 


容 希 是 一 个 元 数据 文件 , 用 于 首 频 或 视频 文件 的 识别 及 结合 使 用 。 它 不 涉及 如 何 编码 所 含 内 
容 的 相关 信息 。 从 本 质 上 说 ， 容 肯 “ 包 装 ” 音 频 流 和 视频 流 。 容 带 通 笛 可 以 包含 已 编码 媒体 的 任 
意 组 合 ， 下 面 来 了 解 Web 应 用 中 与 视频 协同 工作 的 3 种 组 合 情 况 。 


口 0GG 容 需 ， 包 含 了 Theora 视 频 和 Vorbis 音 频 ，Firefox 、Chrome 以 及 Opera 浏 览 锅 文 持 它 。 

口 MP4 容 需 , 包含 了 H.264 视 频 和 AAC 音 频 ，Safari 、Chrome 、IE9 及 以 上 版 本 浏览 器 支持 它 。 
同时 ， 也 能 够 在 Adobe 的 Flash Player 以 及 iPhone、iPod 和 iPad 上 播放 它 。 

口 WebM 容 器 ， 包 含 了 VP8 视 频 和 Vorbis 音 频 ，Firefox、Chrome 、Opera 浏 览 右 以 及 Adobe 的 
Flash Player 支 持 它 。 


考虑 到 Google 和 Mozilla 正在 积极 推动 VP8 和 WebM 的 发 展 ，Theora 格 式 的 组 合 (0OGG 容 大 ) 
最 终 很 可 能 会 被 排除 出 局 ， 但 我 们 仍 需 认识 到 至 少 要 对 视频 进行 2 次 编码 操作 : 一 次 使 用 H.264 
为 Safari 、iOS 、 耻 9 及 以 上 版 本 进行 编码 ， 同 时 ， 由 于 Firefox 和 Opera 不 文 持 H.264， 因 此 ， 还 需 
再 次 使 用 VP8 为 Firefox 和 Opera 进 行 编码 。"” 














浏 览 器 容 器 视 频 音 频 
IE9+ MP4 H.264 AAC 或 MP3 
Safari 以 及 iOS 上 的 Safari MP4 H.264 AAC 
Firefox 、Chrome 、Opera 以 及 Android 浏 览 媳 WebM VP8 Vorbls 





还 有 很 多 内 容 需要 进一步 领会 , 现在 你 已 经 对 音频 及 视频 的 相关 历史 和 限制 有 所 了 解 。 接 下 
来 ， 我 们 先 从 首 频 看 手 ， 深 入 实战 。 


7.3 实例 20: 音频 特性 


AwesomeCo 公 司 正 在 开发 一 个 演示 时 循环 播放 免 版 税 首 频 的 站 扣 。 完 来 实现 一 个 单 曲 播放 合 
集 的 原型 页 面 是 个 不 错 的 主意 。 当 页 面 完成 时 ， 页面 上 丈 会 有 一 个 视频 播放 列表 , 访问 者 可 以 快 
速 视听 每 一 个 音频 。 不 必 担 心 去 哪儿 找 这 些 音频 质料 , 客户 方 录 音 师 为 我 们 准备 好 了 MP3 及 OGG 
格式 的 首 频 样本 。 在 附录 3 中 可 以 找到 关于 如 何 编码 个 人 首 频 文件 的 少量 信息 。 











7.3.1 创建 基本 的 音频 列表 


录音 师 提 供 了 四 个 音频 样本 : drums ( 栈 士 副 )、organ ( 风 骏 )，bass ( 贝 司 ) 以 及 guitar ( 吉 
他 )。 我 们 接 下 来 需要 使 用 HTML 标 记 来 描述 每 段 音 乐 。 以 下 是 描述 drums 的 标记 代码 。 


GD http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-June/020620.html 
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htmlSs audio/audio.html 


<article class="sample"> 
<header><h2>Drums</h2></header> 
<audio id="drums" controls> 
<SOurce src="sounds/ogg/drums.099" type="audi0/09g"> 
<source src="sounds/mp3/drums.mp3" type="audio/mpeg"> 
<a href="sounds/mp3/drums.mp3">Download drums .mp3</a> 
</audio> 
</article> 


首先 定义 <audio> 标 签 ， 并 告诉 它 我 们 希望 显示 一 些 控 件 。 在 <audio> 标 签 内 部 ， 定 义 了 多 
个 <source> 标 签 ， 一 个 用 于 MP3 格 式 ， 为 一 个 用 于 OGG 格 式 。type 属 性 描述 了 首 频 类 型 ,一 日 
设置 了 音频 类 型 , 浏览 絮 就 不 用 癌 服务 端 询 问 有 具体 的 音频 格式 了 ; 浏览 絮 只 需 判 别 其 自 丑 支持 的 
音频 类 型 ， 这 个 判别 过 程 非常 快 。 如 果 浏 览 硕 无 法 文 持 第 一 种 格式 ， 它 就 会 符 试 下 一 个 ， 直 到 最 
后 一 个 <source> 标 签 。 

最 后 ， 我 们 显示 了 一 个 允许 访问 者 直接 下 载 MP3 格 式 文件 的 链接 。 如 果 浏 览 厚 不 文 持 
<audio> 标 签 ， 这 个 链接 就 会 显示 出 来 。 

这 上 段 基本 的 代码 可 以 在 Chrome、Safari 以 及 Firefox 中 运行 。 接 下 来 , 把 上 述 代 码 连 同 剩 余 的 3 
个 音频 样本 放 进 一 个 HTML5 模 版 中 。 























htmlSs audio/audio.html 


<article class="sample"> 
<header><h2>Drums</h2></header> 
<audio id="drums" controls> 
<soOurce src="sounds/ogg/drums.o09gg" type="audi0/0g99"> 
<source src="sounds/mp3/drums.mp3" type="audio/mpeg"> 
<a href="sounds/mp3/drums.mp3">Download drums.mp3</a> 
</audio> 
</article> 


<article class="sample"> 
<header><h2>Guitar</h2></header> 
<audio id="guitar" controls> 
<soOurce src="sounds/ogg/guitar.og9g" type="audi0o/09g"> 
<source src="sounds/mp3/9uitar.mp3" type="audio/mpeg"> 
<a href="sounds/mp3/9uitar.mp3">Download guitar.mp3</a> 
</audio> 
</article> 


<article class="sample"> 
<header><h2>0rgan</h2></header> 
<audio id="organ" controls> 
<SOuUrce src="sounds/ogg/organ.o9g" type="audio/09g"> 
<source src="sounds/mp3/organ.mp3" type="audio/mpeg"> 
<a href=s"sounds/mp3/0organ.mp3">Download organ.mp3</a> 
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</audio> 
</article> 


<article class="sample"> 
<header><h2>Bass</h2></header> 
<audio id="bass" controls> 
<SOuUrce src="sounds/ogg/bass.099" type="auydio0/099"> 
<source src="sounds/mp3/bass.mp3" type="audio/mpeg"> 
<a href="sounds/mp3/bass.mp3">Download bass.mp3</a> 
</audio> 
</article> 
</body> 
</html> 


使 用 HTML5S 兼 容 的 浏览 右 打 开 这 个 页 面 ， 列 表 中 的 每 段 音乐 都 拥有 一 个 属于 它 目 己 的 播放 
器 。 如 网 7-1 所 示 。 











Samples: 
Drums 

Guitar 

> 全 0:08 中) c==® 
Organ 

po® 0:08 |) em==® 
Bass 


图 7-1 Chrome 中 的 音频 播放 从 
按 下 播放 按钮 后 ， 浏 览 需 就 会 日 行 处 理 音 乐 播 放 。 


用 低 版 本 IE 浏 览 瘟 打开 这 个 页 面 时 ， 由 于 I 并 不 支持 <audio> 元 系 ， 因 此 将 显示 下 载 链接 。 
这 是 个 合适 的 回 退 方案 ,不 过 让 我 们 来 看 看 能 否 做 得 更 好 。 





7.3.2” 回 退 方案 


在 前 面 的 代码 中 , 我 们 的 音频 播放 回 退 方案 内 置 于 <audio> 元 系 内 部 , 通过 <source> 标 签 定 
义 多 个 音频 来 源 ， 并 提供 音频 文件 的 下 载 链接 。 如 采 浏 览 融 不 文 持 <audio> 元 系 ， 则 会 显示 置 于 
<audio> 元 素 内 部 的 下 载 链接 。 我 们 甚至 还 可 以 在 定义 了 音频 来 源 之 后 , 使 用 Flash 搬 件 技术 作为 
回 退 方 案 。 

然而 ,这 可 能 并 不 是 最 佳 方式 。 你 可 能 会 磁 到 浏览 磊 支 持 <audio> 标 签 但 不 支持 你 所 提供 的 
音频 格式 的 情况 。 又 如 ， 你 可 能 认为 不 值得 花费 太 多 时 间 去 提供 多 种 格式 的 音频 文 持 。 此 外 ， 
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HTMLS 规 范 也 指出 ，<audio> 元 系 的 回 退 支持 并 非 用 于 放置 被 斌 医 阅 读 硕 读 取 的 内 容 。 


最 简单 的 回 退 方 案 是 把 下 载 链接 移 到 <audio> 标 签 的 外 部 ,并 用 JavaScript 隐 藏 它 ， 如 以 下 代 
公所 示 O 〇 


html5 audio/advanced audio.html 


<article class="sample"> 
<header><h2>Drums</h2></header> 
<audio id="drums" controls> 
<source src="sounds/ogg/drums.ogg" type="audi0/099"> 
<SOurce src="sounds/mp3/drums.mp3" type="audio/mpeg"> 
</audio> 
<a href="sounds/mp3/drums.mp3">Download drums .mp3</a> 
</article> 


音频 的 回 退 解 决 方案 相对 简单 ,一些 用 户 可 能 会 对 能 够 方便 地 下 载 音 频 文件 表示 赞赏 ,因此 ， 
你 也 可 以 考虑 不 用 隐藏 下 载 链 接 。 

如 果 你 还 想 做 得 更 好 , 就 得 考虑 侦 测 浏览 紫 的 音频 支持 程度 。 可 以 通过 JavaScript 创 建 一 个 新 
的 <audio> 元 素 ， 并 检查 它 能 否 调 用 canPlayType() 方 法 ， 如 以 下 代码 所 示 。 


Var canPlayAudioFiles = !!(document.createElement('audio').canplayType), 


如 条 你 想 侦 测 是 否 文 持 当 前 音频 文件 类 型 ， 那 么 ， 接 下 来 应 该 按 以 下 代码 所 示 ， 在 <audio> 
元 素 上 调用 canPLayType( ) 方 法 。 
var audio = document ,createELement ( ' auU020  ) ， 
if(audio.canPplayType('audio/o09g' ) ){ 
// 播放 0gg 文 件 
} 


canPlayType() 方 法 并 不 返回 布尔 类 型 的 true 或 false 值 ， 而 是 返回 以 下 字符 串 值 之 一 。 


口 "probably": 很 可 能 正常 工作 。 

口 "maybe": 有 可 能 正常 工作 。 

口 ""; 空 值 , 可 以 视 作 “虚假 值 ”。 意思 是 尽管 这 个 值 不 是 布尔 类 型 的 false 值 , 但 JavaScript 
并 不 会 把 它 视 为 true。 


第 三 方 库 Modernizr 在 检查 首 频 可 用 性 方面 有 着 更 好 的 文 持 。 它 对 canPlayType() 方 法 进行 
了 包装 ， 并 提供 了 一 些 比较 便利 的 方法 。 


If(Modernizr .audio.0gg){ 
// 播放 0gg 文 件 
} 















































if (Modernizr.audio.mp3)1{ 
// 播放 MP3 文 件 
} 
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然而 ，Modernizr 库 仍 使 用 HTML5 规 范 的 返回 值 测试 音频 格式 能 否 被 浏览 大 播 放 。 

在 浏览 华中 文 持 原生 播放 音频 还 只 是 第 一 步 ， 浏 览 硕 正春 手 为 音频 和 视频 文 持 提 供 HTML5 
的 JavaScript 应 用 程序 接口 (API )， 你 将 在 7.6 市 中 看 到 相关 内 容 。 

现在 , 你 已 经 掌握 了 如 何 使 用 浏览 絮 原 生 支 持 的 音频 播放 功能 ， 接 下 来 ,我们 将 讨论 如 何 针 
对 视频 来 实现 类 似 的 播放 功能 。 











7.4 实例 21: 散 入 视频 


AwesomeCo 公 司 想 在 其 网 站 展示 新 系列 的 培训 视频 , 并 希望 这 些 视频 可 以 在 尽 可 能 多 的 设 
备 上 播放 ， 尤 其 是 在 iPad 上 。 作 为 示例 ,我 们 将 用 “Photoshop 技 巧 ” 系 列 里 提供 的 两 段 视频 来 
创建 页 面 原型 。 很 幸运 , 我 们 已 经 拿 到 了 这 些 视频 的 H.264、Theora、VP8 等 格式 的 文件 , 因此 ， 
可 以 集中 精力 来 创建 页 面 。( 想 要 详细 了 解 如 何 对 自己 的 视频 文件 进行 编码 , 请 参考 附录 3 中 的 
有 关内 容 。) 

<video> 标 签 的 使 用 方式 跟 <audio> 标 签 很 相似 。 只 需 提 供 源 文件 ,Chrome 、Firefox 、Safari、 
iOS 上 的 Safari 以 及 IE 9 无 需 借助 额外 插件 就 能 直接 播放 视频 。 第 一 个 视频 文件 01_blur 的 标记 代码 
如 下 所 示 。 








html5_video/native.html 
<article> 
<header> 
<h2>Saturate with Blur</h2> 
</header> 
<Video id="Vvideo bluyr" preload="auto" controls 
width="640" height="480"> 
<source src="Video/h264/01 blur.mp4" type='video/mp4'> 
<source src="video/theora/01 blur.ogv" type='video/o0gg'> 
<source src="vVvideo/webm/01 blur,.webm" type='video/webm'> 
<p>Your browser does not support the video tag.</p> 
</VIdeo> 
</article> 


我 们 定义 了 <video> 标 签 并 告知 它 需要 显示 一 些 播放 控件 。 通 过 pretoad 属 性 通知 训 览 融 在 
后 人 台 加 载 视 频 。 由 于 没有 包括 autopLay 属 性 ， 我 们 隐 式 通知 浏 览 硕 不 要 目 动 播放 视频 。 


在 <video> 标 签 内 部 , 使 用 <source> 标 签 定 义 各 个 视频 片段 , 并 指定 其 视频 类 型 。 浏 览 胡 只 
能 播放 其 文 持 的 类 型 ， 但 我 们 不 得 不 为 浏 览 硕 提供 所 有 的 格式 。 如 采 只 提供 MP4 格 去 的 文件 , 那 
么 ， 那 些 文 持 <video> 标 签 但 不 文 持 MP4 文 件 的 浏览 硕 就 只 能 呈现 一 个 空 的 视频 播放 融 。 

为 了 确保 Web 应 用 服务 硕 知 道 如 何 处 理 视频 文件 ， 需 要 添加 适当 的 MIME 类 型 到 服务 硕 上 。 
不 同 服务 需 平 台 的 处 理 方式 不 尽 相 同 ,但 如 果 使 用 Apache 应 用 服务 硕 ,， 我 们 需 在 Web 页 面 所 在 的 
目录 里 创建 一 个 .htaccess 文 件 ， 该 文件 定义 了 视频 的 MIME 类 型 ， 如 以 下 代码 所 示 。 
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html5_video/.htaccess 

AddType video/ogg .0gVv 

AdgType video/mp4 .mp4 

AddType video/webm .webm 

如 果 通 过 Amazon S3 提 供 视频 服务 ， 你 可 以 为 每 个 视频 类 型 设置 content -type 头 。 如 果 使 
用 微软 的 HS 服务 磊 ， 则 只 需 使 用 服务 需 的 配置 界面 来 编辑 站 点 的 MIME 类 型 。 

一 旦 将 这 些 文件 上 传 到 Web 服 务 嚣 上， 并 配置 了 正确 的 MIME 类 型 ， 视 频 就 可 以 在 各 式 各 样 
的 浏览 各 中 播放 了 ， 用 户 将 看 到 一 个 类 似 图 7-2 所 示 的 视频 播放 人 各。 
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图 7-2 ”通过 Chrome 原 生 视 频 播 放 需 播放 的 视频 
我 们 仍 无 法 满足 IE8 或 更 老 版 本 IE 用 户 的 需要 ， 所 以 需要 使 用 Flash 作 为 回 退 方案 。 


回 退 方案 

为 了 正确 提供 一 个 基于 Flash 的 回 退 方案 ， 同 时 仍然 能 够 使 用 HTML5 视 频 播放 功能 ， 我 们 在 
<Vvideo> 标 签 内 添加 Flash 对 象 代码 。“Video for Everybody!” 网 站 详细 介绍 了 这 一 过 程 ?>， 还 有 一 
种 更 简单 的 方式 可 以 实现 视频 的 跨 平 台 文 持 ， 并 且 不 用 写 大 量 的 标记 。 

第 三 方 的 Video.js 库 使 得 在 所 有 平台 上 播放 视频 变 得 非常 容易 ,通过 在 <video> 标 签 中 添加 一 
些 代 码 ， 为 不 文 持 HTML5 视 频 功 能 的 浏览 需 构 建 一 个 合适 的 Flash 回 退 方案 。 这 就 是 Video.js 库 的 
工作 原理 。” 





(QD) http://camendesign.com/code/video for everybody 
@) http://www.videojs.com/ 
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首先 ， 添加 Video.js 库 及 相应 的 样式 表 到 页 面 中 。Video.js 提 供 了 内 容 分 发 网 络 ( Content 
Delivery Network，CDN ) 文 持 ， 因 此 , 不 必 上 自己 下 载 Video.js 库 ， 只 需 将 它 添加 到 <head> 标 签 中 ， 
代码 如 下 所 示 。 


html5_video/videojs_index.html 
<link href="http://vis.zZencdn.net/4.0/video-js.css" rel="stylesheet"> 
<script src="http://vis.zZencdn,net/4.0/video.i;s"></script> 


接 下 来 ， 在 <video> 标 签 中 添加 些 属性 。 
<Video id="video biluyr" preload="auto" controls 
width="640" height="480" 
class="video-]Js vis-default-skin" 
data-setup="{}"> 
通过 class 属 性 通知 Video.js 使 用 视频 功能 ， 并 使 用 我 们 指定 的 播放 从 皮肤 。data-setup 属 
性 是 目 定 义 属 性 ， 包 含 了 JSON 格 式 的 配置 数据 。 在 这 里 ， 我 们 并 不 需要 特别 的 配置 ， 因 此 只 需 
传人 一 个 空 对 象 即 可 O 


在 了 8 中 打开 页 面 ， 就 可 以 播放 视频 了 ， 并 且 无 需 将 视频 编码 为 其 他 格式 ， 也 不 需要 加 载 我 
们 目 己 的 Flash 播 放 希 。 最 终 效 果 如 图 7-3 所 示 。 需 要 注意 的 是 ， 除 非 请 求 位 于 Web 服 务 大 上 的 视 
频 页 面 , 否则 Flash 的 安全 设置 有 可 能 导致 你 无 法 观看 视频 , 通过 file: URL 方 式 打开 的 页 面 有 可 
能 无 法 工作 。 
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图 7-3 ”在 正中 使 用 Video.js 播 放 视 频 
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当然 , 我 们 还 要 为 那些 浏览 可 既 无 法 原生 支持 视频 播放 功能 , 又 没有 安 儿 Flash 的 用 户 提 供 回 
退 方 案 。 可 以 添加 一 个 市 有 下 载 链 接 的 新 区 块 ， 证 用 户 下 载 视 频 文件 ， 代 码 如 下 所 示 。 





html5_video/videojs_index.html 


<section class="downioads"> 
<header> 
<h3>Down Loads</h3> 
</header> 
<UL> 
<li><a href="video/h264/901 blur.mp4"> 
H264, playable on most platforms</a></1i> 
<li><a href="video/theora/01 biuyr,ogv">0GG format</a></\i> 
<li><a href="video/webm/01 bluyr.webm">WebM format</a></LIL> 
</ul> 
</section> 


我 们 可 以 如 7.3 节 所 述 ， 使 用 Modemizr 库 来 检测 视频 支持 情况 。 但 在 许多 情况 下 ， 让 用 户 下 
载 视频 以 供 离线 观看 会 更 有 意义 这样， 用 户 就 可 以 稍 后 在 平板 电脑 或 其 他 设备 上 观看 。 隐 藏 下 
载 链接 也 许可 以 节省 屏幕 空间 ,但 并 不 能 阻止 玖 明 的 用 户 直接 下 载 视频 ， 因 此， 不 要 把 隐藏 下 载 
链接 作为 安全 措施 。 

1. 为 特定 的 客户 端 强制 使 用 Flash 


默认 情况 下 ，Video.js 使 用 Flash 技 术 作 为 不 文 持 <video> 元 系 的 浏览 需 的 回 退 方案 。 在 某 些 
场景 中 ， 你 也 许 希 望 为 特定 的 浏览 器 强制 使 用 Flash， 即 使 它们 支持 HTML5 视 频 功 能 。 请 记 住 ， 
如 采用 户 的 浏览 善文 持 <video> 标 签 ， 它 就 不 会 使 用 Flash 的 回 退 方 案 ， 因 此 ， 你 就 不 得 不 添加 浏 
览 器 支持 的 视频 格式 调用 代码 , 还 可 能 出 现 Flash 回 退 方案 从 未 使 用 到 的 情况 。 如 果 你 有 大 量 MP4 
格式 的 视频 ， 可 能 就 不 需要 转换 它们 了 ， 而 是 直接 使 用 Flash 回 退 方案 ， 因 为 Flash 能 够 很 好 地 播 
放 MP4 文 件 。 


通过 特性 检测 技术 及 Video.js 配 置 项 的 简单 结合 使 用 ， 我 们 可 以 通知 Video.js 在 浏览 磊 不 支持 
MP4 的 情况 下 使 用 Flash 回 退 技 术 。 


在 每 个 <video> 标 签 之 后 ， 添 加 相关 代码 ， 测 试 如 末 浏 览 硕 文 持 MP4 文 件 会 发 和 后 什么 。 











html5_video/mp4only index.html 
<script> 
Var videoElement = gocument ,CreateELement ("video"):; 
if{(videoElement.canPplayType)t 
If (videoElement.canplayType("video/mp4") === ""){ 
videojs("video blur", {"techOrder": ["fiash","htmtl5"]}),; 
}; 
} 


</script> 
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我 们 创建 了 一 个 <video> 元 素 ， 之 后 判断 它 是 否 支 持 canPlayType() 方 法 。 如 果 canPlay 
Type() 方 法 返回 空 字符 串 ， 那 么 浏览 絮 就 不 支持 MP4， 接 下 来 就 使 用 Video.js 库 提供 的 videojs 
对 象 配 置 视频 播放 各 的 相关 选项 。 

videojs 对 象 传人 <video> 标 签 的 id 作为 它 的 第 一 个 参数 , 后 面 跟 一 个 配置 选项 的 散 列 参数 ， 
该 选项 用 于 配置 播放 需 如 何 工作 。 

这 些 就 绪 之 后 ， 原 生 不 支持 MP4 文 件 的 Firefox 浏 览 器 ， 在 播放 MP4 文 件 时 ， 就 会 使 用 Flash 
的 回 退 技术 。 值 得 注意 的 是 ， 这 并 非 一 个 最 佳 方案 ， 应 该 为 浏览 避 进 行 视频 编码 。 但 如 果 你 没有 
能 力 或 没有 源 文件 对 视频 编码 ， 上 述 代 码 才 算是 一 个 好 的 折衷 方案 。 

视频 是 一 个 分 享 创 意 和 信息 的 极 好 方式 , 但 对 于 那些 视力 或 听力 有 障碍 的 用 户 来 说 , 我 们 能 
为 他 们 做 些 什 么 呢 ? 请 继续 往 下 看 ! 

















7.5 实例 22: 视频 播放 的 可 访问 性 


在 前 面 讨论 的 回 退 方案 中 ， 没 有 一 个 能 够 解决 残障 人 士 的 使 用 问题 。 实 际 上 ，HTML5 规 范 
已 明确 指出 了 这 一 点 。 提供 音 频 下 载 功 能 对 听 障 人 士 来 说 没 任何 意义 ,而 视 障 人 士 对 离线 观看 视 
频 也 不 感 兴 趣 。 如 琳 你 要 提供 内 容 给 用 户 ,， 就 应 该 尽 可 能 提供 可 用 的 茶 代 方案 。 提供 视频 及 首 频 
功能 时 ， 还 应 提供 用 户 能 够 查看 的 对 应 文字 稿 。 如 宁 需 要 你 目 己 生成 内 容 , 由 于 文字 稳 可 以 耻 接 
由 脚本 生成 那么， 只 要 你 从 一 开始 束 做 好 规划 ， 处 理 文学 稳 束 轻而易举 了 。 接 下 来 ,在 视频 下 
方 诺 加 一 段 商 单 的 文字 稿 。 

















html5_video/videojs_index.html 


<section class="transcript"> 
<h2>Transcript</h2> 
<p> 
We'll drag the existing layer to the new button on the bottom of 
the Layers palette to create a new copy. 
</p> 
<p> 
Next we'll go to the Filter menu and choose Gaussian BLlur. 
We'll change the blur amount just enough so that we lose a little 
bit of the detail of the image. 
</p> 
<p> 
Now we'll double-click on the layer to edit the layer and 
change the blending mode to Overlay. We can then adjust the 
amount of the effect by changing the opacity slider. 
</p> 
<p>Now we have a slightly enhanced image.</p> 
</section> 


可 以 隐藏 这 段 文字 稿 , 或 者 在 主页 中 放置 天 联 到 文学 稳 的 链接 。 只 要 你 能 让 文子 柱 容 多 找到 
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和 理解 , 效 来 就 达到 了 。 如 采 没 办 法 提供 文字 稿 , 可 以 考虑 提供 一 段 小 结 , 强调 视频 的 重点 内 容 。 
有 总 比 没 有 好 。 


7.5.1 添加 字幕 


文字 稿 固然 不 销 ， 但 我 们 还 可 以 更 进一步 。HTMLS 提 供 了 标识 视频 字幕 的 <track> 新 标签 。 
<track> 标 签 目前 并 未 得 到 浏览 器 的 广 泛 文 持 ， 但 Video.js 库 能 很 好 地 文 持 它 。 要 使 用 <track> 标 
签 ， 我 们 使 用 一 种 被 称 为 网 络 视 频 文 本 轨道 ( Web Video Text Tracks，Web VTT ) 的 格式 ， 来 创 
建 一 个 包含 了 字幕 信息 及 相应 提示 点 的 文本 文件 。Web VTT 在 IE10、Chrome 、Opera 和 Safari 中 都 
得 到 了 文 择 。 让 我 们 选 一 个 视频 来 试 试看 。 


首先 ,在 video 目 录 中 创建 一 个 存放 VTT 文 件 的 captions 目 录 。 之 后 ,在 captions 目 录 中 创建 VTT 
文件 01_blur .vtt。 该 文件 包含 提示 点 以 及 将 在 提示 点 播放 的 字幕 文本 内 容 。 创 建 这 些 文件 需要 花 
些 时 间 ， 这 里 直接 给 出 该 文件 的 完整 内 容 。 














html5_video/video/captions/01_blur.vtt 
WEBVTT 


00:00.000 --> 00:08 .906 
We'll drag the existing Layer to the New button on the 
bottom of the Layers panel to create a new copy. 


00:08.906 --> 00:14.,167 
Now we'll go to the Filter menu and choose Gaussian Blur. 


00:14.167 --> 00:22.907 
We'll change the blur amount just enough so we lose a 
little detail of the image. 


00:22.907 --> 00:33.670 
Now we'll double-click on the layer to edit the layer. 


00:33.670 --> 00:41.928 

And we iLL change the blending mode to overilay. This allows 
the original Layer underneath to show through. 

00:41.928 --> 00:48.812 


We can then adjust the amount of the effect by changing 
the opacity. 


00:48.812 --> 00:57.507 
And now we have a slighily enhanced image. 


这 个 文件 链接 字 和 右 信 息 到 视频 的 各 个 相关 部 分 。 我 们 定义 一 个 时 间 段 , 之 后 在 每 个 时 间 段 下 
面 放置 字 医 文本 内 容 。 可 以 有 多 行 的 字幕 , 只 要 不 用 空 行 隐 开 即 可 。 要 让 该 文件 跟 视频 协同 工作 ， 
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需 在 <video> 标 签 里 面 添 加 一 个 <track> 标 签 ， 并 指 回 这 个 文件 。 


html5_video/videojs_index.html 
<track kind="captions" src="video/captions/el blur.vtt" 
srclang="en-us" label="Engltiish" /> 


我 们 将 它 指定 为 captions 字 需 类 型 ， 并 使 用 英文 。 也 可 以 用 其 他 博 言 创建 字幕 ， 并 用 不 同 








的 文件 存储 各 种 语言 版 本 内 容 。 但 在 这 里 ， 这 样 做 已 经 足够 了 。 运 行 效 来 如 图 7-4 所 示 。 
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图 7-4 ”通过 Video.js 实 现 的 字幕 呈现 
为 视频 播放 创建 字 冯 文件 需要 花费 不 少时 间 ， 但 这 种 回 退 方案 为 听 障 人 士 提 供 了 极 大 的 便 
利 。 同时 , 这 个 方案 对 那些 没有 音频 设备 的 用 户 来 说 也 非常 有 帮助 , 比如 在 办 公 环 境 或 图 书馆 里 。 
最 棱 的 是 ， 有 了 Video.js， 你 可 以 马上 用 它 来 实现 一 个 优秀 的 回 退 方案 。 








7.5.2 ”HTML5 视频 技术 的 局 限 性 

在 广泛 应 用 之 前 ，HTML5 视 频 技 术 还 有 一 些 障碍 需要 跨越 。 

首先 ，HTML5 视 频 并 未 对 视频 流 技术 作 规 定 。 大 多 数 用 户 都 习惯 于 对 视频 的 特定 部 分 进行 
定位 。 基 于 Flash 技 术 的 视频 播放 需 擅 长 处 理 这 种 事情 ， 因 为 作为 一 个 视频 发 布 平 台 ，Adobe 公 司 
投入 了 大 量 努 力 把 这 种 技术 引入 到 了 Flash 中 。 为 了 能 够 对 HTML5 视 频 进 行 检 索 ， 浏 览 硕 病 必 须 
完全 下 载 视频 文件 。 这 种 情况 在 将 来 可 能 会 有 所 改变 。 

其 次 ， 还 缺失 一 种 较 好 的 管理 模式 。 一 些 希 望 阻 止 内 容 被 盗用 的 网 站 (如 Hulu )， 一 般 不 会 
采用 HTMLS 视 频 。 对 这 样 的 场景 而 言 ，Flash 仍 然 是 一 个 可 行 的 解决 方案 。 


最 后 也 是 最 重要 的 ， 对 视频 进行 编 但 的 过 程 代 价 高 、 花 费时 间 长 。 需 要 编码 成 好 几 种 格式 的 
限制 使 得 HTMLS 视 频 技 术 缺 少 吸 引力 。 鉴 于 此 , 很 多 网 站 都 提供 有 专利 风险 的 H.264 格 式 的 视频 ， 
因为 只 有 这 样 ， 才 有 可 能 通过 HTMLS 视 频 技 术 与 Flash 技 术 的 结合 ， 最 大 程度 地 满足 视频 在 各 个 
设备 上 的 播放 需要 。 

这 些 问 题 并 不 会 阻碍 HTML5 的 发 展 与 普及 ,但 在 能 够 使 用 HTML5 视 频 技 术 来 取代 Flash 技 
术 ， 使 之 成 为 一 个 视频 发 布 平台 之 前 ， 这 些 问 题 是 必须 直 视 的 。 
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7.6 未 来 展望 


一 流 的 浏览 硕 音 频 文 持 功 能 给 广大 Web 开 发 者 们 市 来 了 无 限 的 可 能 。 基 于 JavaScript 的 Web 应 
用 可 以 轻松 实现 各 种 首 效 和 声音 提示 , 而 无 需 通 过 Flash 持 件 技术 来 租 入 音频 ,浏览 絮 原 生 视 频 文 
持 可 以 让 视频 在 iPhone 等 设备 上 进行 播放 ， 同 时 ，HTMLS 还 提供 了 一 个 使 用 JavaScript 来 实现 与 
痛 频 及 视频 交互 的 开放 、 标 准 的 方式 。 最 重要 的 是 , 我 们 可 以 像 人 处 理 图 像 那 样 ,， 通过 语义 标记 及 
更 容易 识别 的 方式 来 处 理 视 频 及 首 频 剪 辑 。 























探索 媒体 内 容 的 JavaScript API 


前 面 我 们 简单 提 及 了 <audio> 和 <video> 元 素 的 JavaScript API。 整 个 API 可 以 侦 测 浏览 器 
能 够 播放 的 音频 文件 类 型 ， 并 且 HTML5 还 提供 了 控制 <audio0> 元 素 播 放 的 方法 。 


在 7.3 节 中 ， 我 们 创建 了 一 个 播放 多 个 音频 文件 的 页 面 。 可 以 使 用 JavaScript API 来 实现 
几乎 在 同一 时 间 播 放 所 有 声音 的 功能 。 这 里 有 一 个 简单 的 处 理 。 


htmlSs_audio/javascripts/audio.js 


Var element = $("<p><input type='button' value='Play all'/></p>") 
element.click(function()f 
$("audio").each(function()t{ 
this.play(); 
}) 
Fl 


$("body").append(element); 


我 们 添加 了 一 个 播放 所 有 文件 的 按钮 ， 按 下 该 按钮 时 ， 会 遍历 页 面 中 所 有 的 <audi0> 元 
素 ， 并 调用 每 个 <audio> 元 素 的 play() 方 法 。 


可 以 用 类 似 的 方式 处 理 视频 。API 里 面 还 提供 了 一 些 方法 来 开始 和 暂停 元 素 播 放 、 
当前 时 间 ， 以 及 与 字幕 轨道 里 的 数据 相 结 合 。 


一 定 要 查阅 规范 说 明 以 了 解 具体 功能 。- 


号 


询 


1. http:/Wwww.w3.org/TR/htmlS/embedded-content-0.html#media-elements 








Web VTT 是 另 一 个 值得 密切 关注 的 领域 。Web VTT 的 用 途 不 只 是 提供 字幕 功能 。 它 支持 多 语 
种 的 字幕 ,支持 更 容易 的 音节 导航 , 并 支持 附加 的 视频 元 数据 。 你 甚至 还 可 以 使 用 HTML 和 JSON， 
并 通过 JavaScript 来 与 视频 交互 , 在 进入 或 退出 提示 点 时 触发 事件 。 这 对 于 构建 交互 式 计算 机 视频 
刘 训 课程 来 说 是 个 很 好 的 方式 。 只 不 过 创作 本 书 时 ， 并 不 是 每 一 家 浏览 器 都 实现 了 所 有 的 API， 
等 到 浏览 器 厂商 开始 实现 这 些 API 时 ， 规 范 有 可 能 业已 发 生 了 改变 。 但 浏览 器 功能 的 持续 增强 肯 
定 是 需要 考虑 的 。 




















作为 Web 开 发 者 , 我 们 总 是 对 如 何 开 发 出 更 吸引 人 有 眼球 的 用 户 界 面 伐 有 兴趣 ，CSS3 新 增 了 不 
少 新 方法 来 帮助 开发 者 实现 这 一 点 。 我 们 可 以 在 页 面 中 使 用 自 定 义 字体 , 创建 种 有 圆 角 和 阴影 特 
效 的 元 素 ， 设 置 背 景 为 渐变 色 效 果 ， 甚 至 可 以 旋转 元 素 使 界面 看 起 来 不 再 单调 乏味 。 无 需 依 笔 
Photoshop 或 其 他 图 形 工具 就 能 实现 所 有 这 些 特 效 ， 本 章 就 来 告诉 你 如 何 去 做 。 先 从 设置 圆 角 特 
效 改 进 表单 外 观 开始 。 之 后 将 为 一 个 商贸 展 制作 广告 条 原型 ， 其 中 涉及 阴影 、 旋 转 、 渐 变 以 及 透 
明度 等 特效 。 接 下 来 ， 将 讨论 如 何 使 用 CSS3 的 Gfont- face 特 性 让 公司 商标 的 字体 变 得 更 漂亮 。 
最 后 ， 学 习 如 何 使 用 CSS3 的 动画 技术 。 
我 们 将 在 本 章 中 讨论 以 下 内 容 。 
口 border-radius (border-radius: 10px; ): 给 元 素 设 置 圆 角 (C4、F3、S 3.2、IE9、 
O 10.5 )。 
口 RGBA 支持 (background-color: rgba(255,0,0,0.5); ): 使 用 RGB 颜 色 设 置 值 替代 
十 六 进 制 颜色 设置 值 ， 并 珊 有 透明 度 设置 值 (C4、F3.5、S3.2、I9、O 10.1 )。 
口 box-shadow ( box-shadow: 10px 10px 5px #333; ): 设置 元 素 的 阴影 效果 (C3、F3.5、 
S3.2、]IE9、O 10.5 )。 
口 旋转 (transform: rotate(7.5deg); ): 旋转 元 隶 (C3、F3.5、S3.2、IE9、0O 10.5 )。 
口 渐变 (Linear -gradient(top，#fff，#efefef); ): 创建 渐变 效果 图 像 (C4、F 3.5、 
S 4), 
口 src: url(http://example.com/awesomeco.ttf);: 人 允许 通过 C SS 使 用 特定 字体 (CC 
4、F3.5、S3.2、 IE5、0O10.1), 
口 过 渡 (transition: background 0.3s ease ): 沿 时 间 轴 逐 诸 将 一 个 CS S 属性 由 一 个 
值 过 渡 到 男 一 个 值 (CC4、F3.5、S4、IE 10 )。 
口 动画 (animation: shake 0.5s 1; ): 使 用 定义 好 的 关键 帧 动画 ， 沿 时 间 轴 逐渐 将 一 个 
C SS 属性 由 一 个 值 过渡 到 为 一 个 值 (C4、F3.5、S4、IE10)。 
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8.1 实例 23: 设置 圆 角 


在 Web 页 面 中 ， 元 素 默 认 的 形状 都 是 矩形 。 表 单字 段 、 表 格 ， 其 至 是 页 面 的 各 个 区 块 ， 所 有 
这 些 都 是 四 四 方 方 的 锐 边 状 , 因此 , 多 年 来 设计 师 们 通过 各 种 各 样 的 技术 实现 来 设置 元 素 的 圆 角 
效果 ， 让 界面 效果 看 起 来 更 加 柔和 。 

CSS3 提 供 了 轻松 设置 圆 角 的 功能 ，Chrome 、Firefox 以 及 Safari 支 持 圆 角 特 性 已 经 有 相当 长 的 
一 段 时 间 了 ， 而 正 9 也 实现 了 该 特性 。 因 此 ， 你 可 以 在 设计 中 轻松 添加 圆 角 特性 。 接 下 来 看 看 如 
何 实 现 它 。 














8.1.1 柔 化 登录 表单 

我 们 需要 为 AwesomeCo 公 司 的 客户 门户 及 支持 网 站 创建 一 个 新 的 登录 表单 ,设计 师 交 给 我 们 
的 线 框图 和 原型 显示 表单 字段 是 圆 角 效果 。 接 下 来 ， 先 考虑 只 通过 CSS3 来 实现 圆 角 效果 。 所 创 
建 表单 的 最 终 效果 如 图 8-1 所 示 。 




















Existing Users 
Emmail 
Password 

Lag im 





图 8-1 具有 圆 角 效果 的 表单 
我 们 使 用 一 些 简单 的 HTML 代 码 来 实现 这 个 登录 表单 。 


css3_rough_edges/index.html 


</head> 
<body> 
<form class="10gin" action="/1login" method="post"> 
<fieldset> 
<Legend>Existing Users</Legend> 
<OL> 
<1i> 
<label for="email">Email</label> 
<input id="email" type="email" name="email"> 
</11i> 
<1i> 
<label fo 
<input id="password" type="password" 
name="password" value="" autocomplete="off"/> 
</11i> 
<LI><Input type="submit" value="Log in"></l1> 
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</ol> 
</fieldset> 
</form> 
</body> 
</html> 


接 下 来 为 表单 设置 一 些 样式 ， 让 它 看 起 来 不 会 太 单 调 。 





csSs3_rough_edges/stylesheets/style.css 
. Logint{ 

width: 250px; 
} 


.Login fieldsett{ 
background-color: #ddd; 
border: none; 

} 

.Login legend{ 
background-color: #ddd; 
padding: © 64px © 2px; 

} 


.login ol{list-style: none; 
margin: 2pX; 
padding:0; 

} 

.login 1it{ 
margin: © 0 9px 0; 
padding: 09; 

} 


.Login Input{ 
background-color: #fTf; 
border: 1ipx SoLid #bbb; 
display:block; 
width: 200px; 

} 

.login input/type="submit"]t{ 

background-color: #bbb; 

padding: 90; 

width: 202px; 

} 


这 些 基 本 样式 移 除 了 列表 的 项 目 编号 ， 并 确保 输入 字段 都 是 同一 大 小 。 同 时 还 修改 了 
<fieldset> 以 及 <Legend> 标 签 让 表单 看 起 来 像 个 “标签 页 ”。 设 置 完 这 些 基本 样式 ， 我 们 将 集 
中 精力 来 设置 标题 ( <Legend> 标 签 )、 表 单字 段 、 按 钮 及 整个 表单 的 圆 角 效果 。 


用 一 个 CSS 规 则 来 设置 所 有 表单 元 素 的 圆 角 效果 。 
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css3_rough _ edges/stylesheets/style.css 

.login input, .login fieldset, .login Legend{ 
border-radius: Spx; 

} 


往 style.css 文 件 里 添加 了 以 上 规则 后 ， 就 能 看 到 圆 角 效果 了 。 


8.1.2 回 退 方案 


我 们 的 成 果 可 以 在 Firefox 、Safari 、Chrome 以 及 IE 9、IE 10 训 览 大 中 很 好 地 工作 ， 但 得 不 到 
IE 8 的 支持 。 这 个 问题 对 PIE 库 "而 言 简 直 是 小 菜 一 雁 ，PIE 为 border- radius 圆 角 属 性 及 其 他 一 
些 CSS3 特 性 提供 了 沙 地 文 持 。 下 载 PIE 并 解压 ， 把 PIE.htc 放 到 stylesheets 文 件 夹 中 。 


着 手 处 理 圆 角 之 前 ， 先 来 解决 一 个 样式 方面 的 小 问题 。IE 8 对 每 <Legend> 标 签 有 些许 不 同 ， 
因此 ， 当 我 们 在 下 8 浏览 希 中 浏览 效果 时 ，<Legend> 标 签 看 起 来 并 不 像 一 个 标签 页 ， 用 作 标 题 的 
<Legend> 标 签 完全 落 在 了 <fieLdset> 标 签 中 。 可 以 为 了 下 8 添加 少许 的 处 理 样式 ， 把 <fieLdset> 
标签 里 的 标题 推 高 几 个 像素 ， 使 它 在 Firefox 和 Chrome 里 呈现 的 效果 一 样 。 创 建 一 个 新 文件 
stylesheets/ie.css, 并 在 页 面 的 条 件 注释 里 引用 它 , 这 样 , 该 样式 将 专门 在 正 8 及 之 前 的 版 本 中 使 用 。 




















css3_rough_edges/index.html 


<!--[if lte IE 8]> 
<link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen"> 
<!lfendif]j--> 


接 下 来 ， 在 stylesheetsie.css 文 件 中 添加 <Legend> 标 签 和 <fietLdset> 标 签 的 处 理 规则 : 





css3_rough edges/stylesheets/ie.css 
.Login {margin-top: 20px;} 


.Login fieldset legend{ 
margin-top: -lOpx; 
margin- left: 1l0px; 

} 

.login fieldset{ 
padding-Left: 10px; 

} 


只 震 把 <fieLdset> 标 签 挤 降 20 像 素 ， 同 时 将 <Legend> 标 签 拉 高 10 像 系 ， 就 能 够 做 出 标签 页 
效果 。 我 们 还 把 <fieLdset> 标 签 向 右 推 了 一 些 ， 但 由 于 下 8 默认 样式 的 影响 ， 还 需要 为 
<fieldset> 标 签 添 加 一 些 内 边 距 ,现在 ,IE 8 中 的 浏览 效果 就 和 其 他 浏览 器 里 的 效果 非常 相似 了 。 


最 后 ， 用 behavior 属 性 加 载 PIE，behavior 属 性 是 IE 里 特有 的 CSS 规 则 属性 。 














GD http://css3pie.com/ 
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css3_rough_ edges/stylesheets/ie.css 

.login fieldset, .login input, .login Legend{ 
behavior: UrlLfstyLesheetSs/PTE. Atc) 

} 


由 于 我 们 将 PIE.htc 文 件 存放 在 stylesheets 文 件 夹 中 ,所 以 HTML 页面 中 PIE.htc 的 引用 链接 必须 
是 相对 于 页 面 的 ， 而 不 是 相对 于 样式 表 的 链接 (如 behavior: urL(PIE.htc); 则 是 钳 的 )。 


现在 ， 页 面 在 IE 8 中 的 浏览 效 来 束 跟 其 他 主流 浏览 益 中 的 差不多 了 ， 如 图 8-2 所 示 。 


bwesomeco Customer Portal 





Existme Users 
Email 
Password 
Log in 


图 8-2 ”表单 在 正 8 中 的 浏览 效果 


在 我 们 的 例子 中 , 客户 非 稼 希望 表单 在 所 有 训 览 带 中 郡 能 看 到 圆 角 歼 末 。 但 在 现实 中 ,你 应 
该 尽 可 能 确保 圆 角 设置 方案 的 可 选 性 。 尽管 有 些 用 户 认为 表单 看 起 来 更 柔和 是 一 件 好 事情 , 但 作 
为 开发 者 首先 应 该 了 解 有 多 少 用 户 使 用 的 浏览 带 不 支持 CSS3 圆 角 特性 。 如果 用 户 使 用 IE 9 或 更 高 
版 本 ， 就 不 值得 你 浪费 时 间 维 护 一 个 回 退 方案 。 


圆 角 设置 技术 为 你 的 界面 市 来 了 一 丝 柔 和 的 感觉 。 即 便 如 此 ， 同 其 他 方面 的 设计 一 样 ， 确 保 
实现 的 一 任性 以 及 不 滥用 技术 是 非 第 重要 的 。 
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CSS3 的 圆 角 特性 获得 了 大 量 关 注 , 但 这 还 只 是 CSS3 众 多 魔法 特性 大 餐 中 的 开胃 六 。 我 们 可 
以 给 元 素 添 加 阴影 效果 ， 使 其 从 众多 内 容 中 脱颖而出 ; 可 以 使 用 渐变 特效 让 背景 看 起 来 更 清晰 ; 
也 可 以 通过 转换 特性 来 旋转 元 系 。 让 我 们 把 上 述 儿 种 扩 术 结合 起 来 ,为 即将 到 来 的 Awesome 大 会 
制作 一 个 广告 条 的 部 分 原型 一 一 Awesome 每 年 都 会 举办 这 样 的 商贸 展览 及 产品 发 布 大 会 。 平面 设 
计 师 提供 了 一 个 效 来 如 图 8-3 所 示 的 PSD 文 件 , 界面 有 一 个 斜 放 的 姓名 牌 , 以 及 一 大 块 微微 透明 的 
用 来 填充 Web 内 容 的 空白 。 


可 以 完全 通过 CSS3 来 实现 姓名 牌 、 阴 影 ， 甚 至 是 透明 特性 。 平 面 设计 师 只 需 提 供 一 幅 参 会 
者 的 育 景 图 乒 ， 剩 下 的 事情 就 交 给 我 们 吧 ! 
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图 8-3 ”概念 原型 ， 将 使 用 CSS3 来 重新 实现 


8.2.1 基本 结构 
先 来 实现 广告 条 基本 结构 的 HTML 标 记 代 码 。 创 建新 文件 ， 在 其 中 编写 以 下 代码 。 





css3 banner/index.html 


<IDOCTYPE html> 
<html lang='en'> 
<head> 
<meta charset="utf-8"> 
<title>Sample Banner</title> 
<link rel="stylesheet" href="stylesheets/style.css'"> 
<div id="conference'"> 
<section id="badge"> 
<h3>Hi, My Name Is</h3> 


<h2>Barney</h2> 
</section> 
<sSection id="info'"> 
</section> 
</dliv> 
</body> 
</html> 





接 下 来 创建 一 个 stylesheets/style.css 新 文件 , 并 添加 一 些 基 本 样式 来 定义 姓名 有 牌 以 及 主要 内 容 
区 域 的 布局 。 


css3_banner/stylesheets/style.css 


#conferencet 
background-color: #000,; 
background-image: wril('../images/awesomeconf., jpg'); 
background-position: center ; 
height: 240px; 
width: 960px; 
} 
#bDadge{ 


} 


border: 2px solid blue, 


display: block; 
text-align: Center ; 
width: 200px; 


#1infot{ 


} 


display: block; 
height: 1l160px; 
margin: 20px; 
padding: 20px; 
width: 660px; 


#badge, #info{ 
background-color: #1fff; 


} 


float: left; 


#badge h21{ 


} 


color: red; 
margin: 0; 
font-size: 40px; 


#badge h31 
background-color: blue; 


} 


color: #fff; 
margin: 0; 


SN 
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随 看 这 段 样式 规则 的 实现 ， 姓 名 有 牌 和 主要 内 容 区 域 束 会 并 排 显示 ， 效 来 如 图 8-4 所 示 。 


Hi, My Name Is 
Barney 


,I 
图 8-4 广告 条 初步 效 采 





下 面 继续 设置 姓名 牌 的 样式 。 


8.2.2 


添加 渐进 效果 











我 们 将 姓名 牌 的 月 色 育 景 改 变 为 从 上 月 色 辐 浅 灰 色 过 渡 的 湖 变 色 。 我 们 定义 的 渐变 将 成 为 元 系 


的 背景 





不 尽 相 同 。 
Firefox 15 之 前 的 版 本 使 用 -moz-linear-gradient 方 法 , 在 这 个 属性 里 , 我 们 先 指定 渐变 开 


图 片 。 当 前 ,渐变 效果 已 得 到 了 Firefox、Safari 以 及 Chrome 的 支持 ， 但 各 种 浏 


览 


售 的 实现 
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始点 ， 然 后 定义 开始 颜色 和 结束 颜色 。WebKit 内 核 的 浏览 器 使 用 同样 的 规则 ,但 用 -webkit- 前 
级 取代 -moz- 亲 级。 


实现 渐变 的 标准 方式 是 使 用 linear-gradient”， 看 起 来 跟 上 面 提 到 的 -moz-linear- 
gradient 差 不 多 ,但 在 方向 上 使 用 to bottom 取 代 top。 可 以 使 用 to bottom to right to left、 
to top 等 方向 描述 ， 或 者 使 用 特定 角度 ， 如 45deg。 


为 了 让 各 种 浏览 侣 都 能 呈现 渐变 效果 ， 我 们 疝 样式 表 添 加 以 下 代码 。 








css3_banner/stylesheets/style.css 

#badget 
background- image: -webkit-linear-gradient(top, #fff, #eee); 
background-image; -moz-linear-gradient{(top, #fff, #eee),; 


background-image: linear-gradient(to bottom, #fff, #eee), 
} 


这 段 代 码 满足 了 我 们 的 需要 (使 用 的 是 线性 渐变 )， 但 我 们 还 可 以 实现 径 癌 渐变 ， 也 可 以 指 
定 渐变 过 程 中 的 更 多 色 标 。 本 例 使 用 了 一 个 开始 颜色 以 及 一 个 结束 颜色 , 但 大 要 更 好 地 控制 整个 
渐变 过 程 ， 就 可 以 指定 更 多 的 闫 色 。 接 下 来 给 姓名 有 牌 设置 阴影 特效 。 














8.2.3 添加 阴影 效果 


通过 给 姓名 牌 添 加 阴影 可 以 轻松 实现 其 “浮现 ”在 广告 条 上 的 效果 。 在 以 前 ， 要 实现 阴影 效 
果 ， 一 般 都 是 通过 Photoshop 把 阴影 效果 直接 做 到 图 片 里 ， 或 者 插入 背景 图 片 作为 阴影 。 现 在 ， 
使 用 CSS3 的 box-shadow 属 性 就 可 以 快速 为 元 素 定义 阴影 了 。” 


我 们 将 在 样式 表 文 件 中 通过 该 属性 给 姓名 有 牌 添加 阴影 。 在 #banner 选 择 带 中 添加 box-shadow 
属性 ， 就 在 乞 前 定义 的 渐变 特性 下 面 。 














css3_banner/stylesheets/style.css 


box-shadow: Spx Spx Spx Qpx #333; 


box-shadow 属 性 总 共有 六 个 参数 ， 但 在 这 里 只 用 到 了 5 个 。 第 一 个 是 水 平 偏 移 量 ， 正 数 表 未 
阴影 将 偏 回 对 象 的 右边 ; 负数 表示 阴影 伍 回 左边 。 第 二 个 参数 是 垂直 人 般 移 量 ， 正 数 表 示 阴 影 将 俩 
问 对 象 的 下 方 ; 负数 表示 阴影 偏 癌 上 方 。 第 三 个 参数 是 模糊 半径 ，0 表 示 阴 影 不 模糊 过 渡 ， 界 限 
分 明 ,， 值 越 大 表示 阴影 越 模糊 。 第 四 个 参数 是 覆 善 距离 ， 或 者 说 是 阴影 宽度 。 最 后 一 个 参数 用 来 
定义 阴影 颜色 。 


如 果 指 定 了 第 六 个 可 用 参数 〈inset )， 则 将 阴影 内 置 到 元 系 方 框 里， 以 内 阴影 效果 取代 鸭 























GD http://dev.w3.org/csswg/css3-images/#linear-gradients 
@) http:/www.w3.org/TR/css3-background/#the-box-shadow 
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认 的 外 阴影 效果 。 


请 注意 在 我 们 的 例子 中 并 没有 使 用 特定 的 前 级 。 即 使 是 IE 102， 也 同 其 他 Chrome 、Firefox、 
Safari 以 及 Opera 等 浏览 妖 的 最 新 版 本 一 样 ， 文 持 去 除 特定 前 级 的 box-shadow 属 性 。 然 而 ， 如 果 需 
要 支持 1OS 3、Android 2.1 或 者 2011 年 之 前 的 浏览 大 发 行 版 ,这 时 就 要 用 到 -moz- 或 -webkit- 前 级 。 


可 以 不 断 试验 这 些 参数 值 ， 以 熟悉 其 工作 原理 ,并 找 出 适合 上 自己 的 数值 。 设置 阴影 时 , 请 花 
些 时 间 了 解 一 下 现实 生活 中 的 阴影 呈现 方式 。 用 手电 位 照 向 条 个 物品 , 或 者 到 户外 去 观察 阳光 如 
何在 物品 上 投下 阴影 。 合 理 使 用 视角 很 重要 ， 因 为 不 一 致 的 阴影 会 使 界面 变 得 更 糟 ,特别 是 在 你 
给 多 个 元 素 设置 了 错误 阴影 效果 的 时 候 。 因 此 ,最 简单 的 方式 就 是 对 于 每 个 要 设置 的 阴影 ,都 使 
用 同样 的 参数 。 
































为 文字 添加 阴影 效果 

除了 给 元 素 设 置 阴 影 ， 你 还 可 以 轻松 地 为 文字 设置 阴影 ， 设 置 方式 与 box-shadow 属 性 
类 似 。 

hl{text-shadow: 2px 2px 2px Opx #bbbbbb;} 

指定 了 x 轴 及 1) 轴 的 偏 移 量 、 模 糊 度 、 复 盖 距 离 以 及 阴影 颜色 。 


给 文字 设置 阴影 与 给 元 素 设 置 阴影 的 操作 方式 相同 。 文字 阴影 提供 了 一 种 优雅 效果 ,但 
如 果 重 度 设置 文字 阴影 却 会 性 致 文本 难以 阅读 。 确 保 内 容 的 可 读 性 才 是 最 重要 的 。 


8.2.4 ”旋转 姓名 牌 


我 们 使 用 CSS3 转 换 特 性 来 实现 元 素 的 旋转 、 缩 放 以 及 倾斜 殖 采 ， 类 似 于 Flash 、lllustrator 或 
Inkscape 等 矢量 图 形 软件 能 够 做 到 的 那样 。 添加 这 些 特效 可 以 突出 呈现 元 素 ,， 同 时， 这 也 是 让 页 
面 生动 活泼 的 男 一 种 手段 。 我 们 来 旋转 姓名 有 牌 ， 让 它 稍 稍 倾斜 ， 以 摆脱 广告 条 中 规 中 和 矩 的 限制 。 
再 次 地 ， 我 们 在 #banner 选 择 器 中 添加 相关 属性 。 








css3_banner/stylesheets/style.css 


-webkit-transform: rotate(-7， ) 
-moz-transform: rotate(-7， ) 
-ms-transform: rotate(-7.5deg); 
-0O-transform: rotate(-7， ) 
transform: rotate( -7 ， ) 





CSS3 的 旋转 效 来 很 容易 实现 。 只 要 提供 了 旋转 角度 ， 效 灯 就 出 来 了 。 包 含 在 旋转 元 条 里 的 





(翻译 本 书 时 ， 版 本 已 更 新 到 IE 11。 一 一 译 考 注 
@) http://www.w3.org/TR/css3-2d-transforms/#transform-property 
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元 素 也 会 相应 地 旋转 。 不 过 ， 我 们 暂时 还 做 不 到 只 使 用 标准 的 transform 属 性 。 为 了 在 所 有 浏览 
厚 中 都 能 够 设置 旋转 效果 ， 仍 需 添 加 所 有 可 能 的 特定 前 绥 。 


旋转 设置 跟 圆 角 设置 一 样 傈 单 , 但 也 别 过 度 使 用 。 界 面 设 计 的 目标 是 确保 界面 的 可 用 性 。 如 
末 要 对 包含 大 量 内 容 的 元 系 设 置 旋转 ， 就 要 考虑 到 千 万 别 让 用 户 长 时 间 牌 着 脾 子 浏览 这 些 内 容 ! 

















8.2.5 ”使 用 和 矩阵 精确 转换 


旋转 只 是 我 们 转换 元 素 的 方式 之 一 。 我 们 还 可 以 处 理 缩放 、 倾斜 等 效果 , 甚至 还 可 以 实现 3D 
转换 效果 。 更 酶 的 是 ， 可 以 在 transform 上 使 用 matrix() 方 法 以 处 理 更 多 元 素 转 换 方面 的 控制 。 
要 使 用 该 方法 ,需要 取 所 用 角度 的 余弦 和 正弦 。 比 如 ， 我们 想 用 matrix() 而 不 是 rotate( ) 来 设 
置 姓名 牌 的 旋转 效果 。 

要 使 用 matrix()， 需 要 获取 旋转 所 用 角度 (-7.5 度 )， 并 求 对 应 余弦 值 、 正 弦 值 、 正 弦 值 的 
相反 值 ， 以 及 再 次 求 余弦 值 。 也 就 是 说 ， 我 们 将 使 用 2x2 移 阵 处 理 线性 转换 ， 如 以 下 代码 所 示 。 


-Webkit-transform: matrix(@G.99144 , -0.13052 ,0.13052 ,0.99144 0 90) : 





























-moz-transform: matrix{(0.99144,-0.13052,0.13052,0.99144,0Qpx,Opx),; 
-ms-transform: matrix(0.99144,-0.13052,0.13052,0.99144,0,0); 
-0O-transform: matrix(0.99144,-0.13052,0.13052,0.99144,0,0); 
transform: matrix(0.99144,-0.13052,0.13052,0.99144.,0,0); 








不 好 理解 是 吗 ? 是 的 ， 当 你 仔细 看 过 前 面 的 例子 后 这 种 感觉 就 更 强烈 了 。 记 得 我 们 的 原始 旋 
转角 度 是 -7.5 度 。 因 此 ， 对 于 负 的 正弦 值 ， 需 要 先 求 正 值 ， 再 取 负 值 。™ 

但 这 确实 很 酷 ， 因 为 这 意味 着 我 们 可 以 通过 指定 合适 的 参数 值 来 实现 变形 、 倾 佟 、 旋 转 以 及 
其 他 转换 效果 。 一 旦 掌握 了 matrix() 的 用 法 ， 它 怠 能 发 挥 出 难以 置信 的 威力 。 如 采 想 进一步 了 
解 它 的 用 法 ， 请 参考 : http://peterned.home.xs4all.nl/matrices/。 


数学 挺 难 的 ， 接 下 来 换个 话题 ， 讨 论 透 明 背 景 的 实现 。 














8.2.6 ”透明 背景 


长 期 以 来 ,为 了 设置 背景 的 透明 效果 , 平面 设计 师 一 般 会 在 文字 后 面 放 置 一 个 半 透 明 层 ， 这 
个 操作 通常 需要 用 Photoshop 设 计 一 幅 完 整 的 图 片 ， 或 使 用 CSS 在 男 一 个 元 素 顶 部 放 一 个 透明 的 
PNG 图 片 层 。CSS3 提 供 了 一 个 新 语法 来 定义 支持 透明 度 的 背景 颜色 。 

刚 开 始 学 习 Web 开 发 技术 时 ,我们 就 掌握 了 使 用 十 六 进 制 颜 色 代 码 来 定义 颜色 的 方法 。 我 们 
使 用 成 对 的 数字 定义 大 量 的 红 绿 蓝 颜色 组 合 。 06 是 全 部 关闭 或 没有 的 意思 , 而 FF 则 是 全 部 打开 的 
意思 。 因 此 ， 红 色 的 十 六 进 制 颜色 代码 为 FF0000， 指 红色 全 部 打开 ， 蓝 色 和 绿色 都 全 部 关闭 。 
































@ 简 言 之 ， 请 记 住 这 里 用 到 的 matrix() 形 式 为 : (cos(angte)，sin(angte)，-sin(angte)，cos(angte)，0，0)。 
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CSS3 引 入 了 rbg() 和 rgba() 函 数 。rgb() 函 数 的 工作 原理 就 像 是 十 六 进 制 颜色 代码 设置 的 对 
应 方式 ， 只 不 过 它 使 用 0 到 25$ 之 间 的 数字 来 表示 各 种 颜色 值 ， 如 红色 就 用 rgb(255，0，0) 表 示 。 

rgba( ) 图 数 的 工作 方式 与 rgb() 国 数 相 同 ， 只 是 它 使 用 了 第 4 个 参数 来 定义 透明 度 ， 透 明度 
从 0 到 1。 如 果 设 置 0， 则 完全 透明 并 看 不 到 颜色 。 要 使 得 白色 区 块 呈 现 半 透明 的 效果 ， 需 要 为 info 
区 块 添 加 以 下 规则 : 








css3_banner/stylesheets/style.css 
#infof{ 
background-color: rgba(255,255,255,0.95), 
} 
像 这 样 设置 了 以 上 透明 度 的 值 之 后 ， 用 户 的 对 比 度 设置 有 时 会 影响 最 终 外 观 ， 因 此 ， 应 该 不 
叶 试 验 设 置 值 并 在 多 种 显示 带 中 测试 ， 以 确保 效果 的 一 致 性 。 


我 们 已 经 处 理 完了 广告 条 中 的 info 区 块 ， 接 下 来 设置 圆 角 特效 。 





css3_banner/stylesheets/style.css 
#1infot{ 
background-color: rgba(255,255,255,0.95); 
> border-radius: 12px; 
} 


这 样 ， 我 们 的 广告 条 在 Safari 、Firefox 和 Chrome 中 看 起 来 就 非常 漂亮 了 了 。 接 下 来 ， 为 正 浏 览 
俘 编 写 一 个 特定 样式 。 





8.2.7” 回 退 方案 


本 市 用 到 的 技术 在 IE 10 及 其 他 现代 浏览 带 中 可 以 很 好 地 工作 ,但 在 IE 8 和 IE 9 中 却 不 行 。 可 
以 通过 微软 的 DirectX 俑 选 絮 技术 来 或 多 或 少 地 模拟 这 些 效 果 , 但 随 之 而 来 的 CPU 的 密集 计算 会 干 
扰 其 他 功能 的 运行 , 最 终 产 生 一 个 非常 糟糕 的 用 户 界 面 。 最 好 不 要 为 这 些 特效 实现 回 退 方 宁 。 请 
记 住 本 市 的 实现 是 为 了 视觉 上 的 增强 。 在 一 开始 创建 样式 表 时 , 我 们 就 已 确 背 景色 的 应 用 会 让 文 
字 具 有 一 定 的 可 读 性 。 那 些 不 支持 CSS3 的 浏览 各 仍然 可 以 以 一 种 可 读 的 方式 显示 网 页 内 容 。 

当然 ， 如 采 你 非常 好 奇 并 想 亲 目 一 探究 范 ， 可 以 下 载 本 书 的 源 代码 并 人 研究 一 下 文件 css3_ 
banner/stylesheets/ie.css， 并 尝试 让 相应 的 特效 能 够 在 IE 8 及 之 前 的 浏览 需 中 呈现 出 来 。 但 是 提醒 
一 句 ， 这 个 方案 远 远 没有 达到 完美 的 地 步 ， 要 实现 一 个 完美 的 回 退 方 案 真 不 是 件 简 单 的 事情 。 最 
精 薰 的 是 ， 最 终 的 结果 可 能 会 让 人 大 失 所 理 。 

不 过 , 你 可 以 使 用 通过 条 件 注 释 提供 的 样式 表 来 应 用 一 个 PNG 硼 景 图 片 到 容 需 元 素 上 , 但 在 
实现 之 前 ， 最 好 先 弄 清楚 是 否 有 必要 这 样 做 。 

转换 、 渐 变 及 阴影 等 特效 非常 棒 , 但 人 们 打开 页 面 是 为 了 浏览 内 容 。 恰当 的 字体 会 让 一 切 与 
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众 不 同 ，CSS3 在 字体 设置 方面 给 了 我 们 更 多 的 控制 权 。 接 下 来 就 来 讨论 它 。 


8.3 实例 25: 设置 子 体 


排版 好 坏 对 于 用 户 体验 来 说 至 天 重要 。 本 书 就 使 用 了 经 过 精心 挑选 的 字体 , 这 些 字 体 可 是 由 
专业 人 士 挑 选 的 , 他 们 懂得 如 何 使 用 合适 的 字体 及 间距 为 读者 市 来 更 好 的 阅读 体验 。 这 些 概 念 对 
于 Web 页 面 的 交互 体验 认 知 来 说 也 同等 重要 。 


加 读者 诠释 信息 时 所 用 的 字体 ， 关 乎 读者 理解 这 些 信 息 的 方式 。 图 8-5 展 示 的 字体 非常 适合 


一 个 活力 四 射 的 重金 属 乐队 。 


图 8-5 
但 是 这 个 字体 对 本 书 的 封面 来 说 就 显得 不 伦 不 类 了 见 图 8-6 )。 


TMS apd ©0993 


网 8-6 


如 你 所 见 ， 选 择 一 个 适合 你 信息 的 字体 确实 很 重要 ! Web 应 用 中 涉及 的 字体 选择 问题 在 于 
Web 开 发 者 可 选择 的 字体 太 少 了 ， 也 就 是 局 限于 通常 所 讲 的 “网 络 安全 字体 ”"， 即 普遍 存 在 于 绝 
大 多 数 用 户 操 作 系 统 中 的 字体 。 


在 以 前 ,为 了 突破 这 个 限制 , 我 们 使 用 图 片 来 应 用 特定 字体 , 或 者 直接 将 字体 添加 到 页 面 标 
记 中 ， 或 者 借助 其 他 方式 ， 如 CSS 背 景 图 片 或 SIFR2， 使 用 Flash 来 显示 字体 。 而 今 ，CSS3 字 体 模 
块 提供 了 一 个 更 好 的 方式 。 


AwesomeCo 的 市 场 总 监 决定 要 选 定 公司 用 于 打印 及 Web 页 面 的 字体 , 并 要 求 我 们 调研 一 个 叫 
Garogier 的 字体 ， 该 字体 是 一 种 简单 的 、 细 长 型 字体 ， 可 免费 用 于 商业 用 途 。 作 为 一 个 试验 性 任 
务 ， 我 们 将 在 2.1 节 所 创建 的 博客 样 例 中 使 用 该 字体 。 这 样 的 话 ， 每 个 人 都 可 以 一 和 符 奥 。 接 下 
来 将 讨论 如 何 仅 仅 通过 CSS 技 术 来 指定 并 使 用 字体 。 
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8.3.1 @Gfont-face 


@font-face 指 令 是 在 CSS2 规 范 中 引入 的 ， 并 在 下 5 中 得 以 实现 。 "可 是 ， 微 软 的 实现 却 使 用 
了 一 个 叫 Embedded OpenType( EOT ) 的 字体 格式 ， 而 今 ， 大 多 数 的 字体 都 使 用 TrueType 或 
OpenType 格 式 ， 并 在 所 有 的 现代 浏览 本 中 得 到 了 非常 好 的 文 持 。 





8.3.2 ”字体 格式 
有 各 种 格式 的 字体 ， 你 所 用 的 浏览 器 会 判定 需要 提供 给 用 户 何 种 格式 的 字体 。 





字体 格式 类 型 浏览 器 支持 
Web 开 放 字 体 ( WOFF ) (F3.6、C5、S5.1、E 了 9、0O11.1、ioS 5 ) 
TrueType (TTF ) (F3.3S、C4、S3、010、ioS 4.2、A 2.2 ) 
OpenType (OTF ) (FEF3.3S、C4、S3、0O10、ioS4.2、A2.2 ) 
Embedded OpenType (EOT ) (IE 5~IE 8) 
可 伸缩 矢量 图 形 ( SVG ) (iOS) 


微软 、Opera 以 及 Mozilla 联 合 创建 了 Web 开 放 字 体格 式 ， 该 格式 允许 无 损 压 缩 ， 并 对 字体 制 
作者 而 言 有 着 更 好 的 许可 选择 权 。 
为 了 徐 盖 所 有 的 浏览 带 ， 我 们 不 得 不 为 字体 提供 各 种 格式 。 接 下 来 讨论 如 何 实 现 。 





8.3.3 ”改变 字体 

Font Squirrel 网 站 提供 了 我 们 所 用 字体 的 TrueType、WOFF 、SVG 以 及 EOT 等 各 种 格式 ， 这 些 
格式 都 能 很 好 地 满足 我 们 的 需求 。” 

使 用 字体 需要 两 个 步骤 : 定义 字体 , 并 将 字体 应 用 到 元 素 上 。 在 博客 样式 表 中 , 添加 以 下 代码 : 








css3_fonts/stylesheets/style.css 
@font-face { 
font-family: 'GarogierRegular'; 
src: url('fonts/garogier unhinted-webfont.eot?#iefix') 
format('embedded-opentype'), 
url('fonts/garogier unhinted-webfont.woff') format('woff'), 
url('fonts/garogier unhinted-webfont.ttf') format('truetype'), 
url('fonts/garogier unhinted-webfont.svg#garogierregular') format('svg'); 
font-weight: normal; 
font-style: normal,; 


} 


GD http:/www.w3.org/TR/css3-fonts/ 
@) 可 以 在 http:/www.fontsquirrel.comyfonts/Garogier 及 本 书 源 代码 中 进行 下 载 。 


字体 和 版 权 


有 些 字体 并 不 是 免费 使 用 的 。 如 同 图 片 库 和 其 他 有 版 权 保 护 的 内 容 一 样 ,将 这 些 字体 用 
于 网 页 时 ,也 要 遵从 相关 版 权 和 许可 限制 。 如 果 你 购买 了 一 种 字体 ， 应 该 在 你 的 使 用 权限 范 
转 I 于 页 面 商 标 和 图 片 中 。 这 就 叫 使 用 权 。 然 而 ，Gfont-face 带 来 了 一 种 不 同 的 许 
分 配 的 版 权 。 

当 你 在 页 面 中 诅 入 一 种 字体 , 访问 者 的 浏览 器 就 会 下 载 该 字体 , 这 就 意味 着 你 的 网 站 分 
发 了 这 种 字体 给 其 他 人 了 。 你 必须 完全 确保 页 面 所 用 Re 做 。 

Adobe 公 司 的 Typekit 有 一 个 对 外 提供 的 正版 字体 库 ， 并 提供 辅助 工具 和 代码 以 将 字体 方 
便 地 应 用 到 你 的 网 站 上 。! Typekit 不 是 免费 服务 的 ， 但 如 果 你 确实 需要 使 用 它 的 某 个 特定 字 
体 的 话 ， 也 完全 负担 得 起 。 

Google 提 供 了 Google Font API,“ 它 跟 Typekit 类 似 ， 但 只 包含 开源 字体 。 


所 有 这 些 服 务 都 通过 JavaScript 加 载 字 体 ， 因 此 ， 你 需要 确保 页 面 内 容 在 禁用 JavaScript 
的 情况 下 也 具有 良好 的 可 读 性 。 
只 要 记 住 对 待 字 体 就 像 对 待 其 他 资产 一 样 ， 你 就 不 会 在 版 权 方面 遇 到 问题 。 





1. http://www.typekit.com/ 
2. http://code.google.com/apis/webfonts/ 





首先 定义 字体 系列 ， 给 出 字体 名 称 ， 之 后 提供 字体 来 源 。 我 们 先 提 供 了 Embedded OpenType 
格式 的 字体 ， 以 便 IE 8 能 够 立即 识别 它 ， 之 后 依次 提供 其 他 格式 字体 源 。 用 户 的 浏览 需 将 按 顺 序 
尝试 各 个 字体 源 ， 和 直至 找到 一 个 所 支持 的 字体 格式 。 


.eot 文 件 的 ?#iefix' 前 级 用 于 修复 IE 8 中 一 个 严重 的 语法 解析 bug。 忽 略 该 前 级 将 导致 IE 8 在 
解析 剩余 规则 时 产生 404 错 误 。 问 号 的 作用 是 让 IE 8 把 EO0T 之 后 的 内 容 当 作 查 询 参 数 , 本 来 这 个 前 
级 是 可 以 忽略 的 ( 如 果 没 有 这 种 bug 的 话 )。 














\W 受 问 ， 
xf 。 如 何 转换 自己 的 字体 ? 


如 果 你 自己 开发 了 一 种 字体 ， 或 者 购买 了 一 种 字体 的 版 权 并 需要 生成 对 应 的 多 种 格式 ， 
可 以 使 用 Font Squirrel 网 站 来 进行 字体 转换 ， 该 网 站 还 会 生成 一 个 带 有 所 需 Qfont -face 代 
码 的 样式 表 。 但 是 ， 需 确保 该 字体 的 版 权 允 许 你 这 么 使 用 ， 


1. http://www.fontsquirrel.com/fontface/generator 
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这 段 代 码 假定 我 们 事先 已 经 把 要 用 到 的 所 有 字体 都 放 在 stylesheets/fonts 目 录 里 了 。 字 体 链 接 
相对 于 样式 表 的 位 置 ， 而 不 是 相对 于 调用 样式 表 的 HIML 页 面 的 位 置 。 这 是 可 以 理解 的 ， 因 为 一 
个 样式 表 在 现实 中 有 可 能 被 不 同 的 HTML 页 面 调 用 。 

现在 , 我 们 定义 了 字体 系列 , 并 且 把 它 放 进 了 样式 表 里 。 接 下 来 , 我 们 来 改变 初始 字体 样式 ， 
如 以 下 代码 所 示 : 








css3_fonts/stylesheets/style.css 
body{ 
font-family: "GarogierRegular"; 


} 
随 着 这 些 改 动 的 完成 ， 我 们 的 页 面 文字 就 以 新 的 字体 效果 显示 了 ， 如 图 8-8 所 示 。 


AwesomeCo Blogl 


Latest Posts Archives Contnbyutors Contact Us 

How Many Should We Put You Down For?r 
Posted by Brian on October 1st, 2013 at 2:309PMI 

The first bipg rule in sales is that if the person leaves empty-handed, 
they re likely not going to come back. That's why you have to be 
somewhat apgeressive When you re working with a customer, but you 
have to make sure you don't overdo it and scare them away. 


图 8-8 应 用 了 新 字体 的 博客 页 面 效果 
应 用 字体 的 操作 在 现代 浏览 硕 中 很 容易 实现 , 但 我 们 还 需要 考虑 到 那些 不 支持 字体 应 用 的 浏 





8.3.4” 回 退 方案 
我 们 已 经 为 各 种 版 本 的 三 及 其 他 浏览 盖 提 供 了 回 退 方案 ,但 仍 需 进一步 确保 页 面 的 可 读 性 ， 
所 以 要 考虑 到 不 文 持 Gfont- face 特性 的 浏览 句 ， 以 及 那些 出 于 某 些 原因 无 法 下 载 字 体 的 用 户 。 
我 们 提供 了 Garogier 字 体 的 各 种 格式 ， 但 在 应 用 该 字体 时 ， 并 没有 指定 备 选 字体 。 这 就 意味 
着 如 果 浏 览 右 无 法 显示 Garogier 字 体 ， 就 会 使 用 浏览 右 的 默认 字体 ， 这 样 的 结果 并 不 理想 。 
字体 栈 是 一 个 按 优先 顺序 排列 的 字体 列表 。 先 指定 最 希望 用 户 使 用 的 字体 , 之 后 指定 合适 的 
备 选 字体 。 创 建 字 体 栈 时 ， 花 点 时 间 去 挑选 真正 合适 的 备 选 字体 。 各 种 字体 的 字 间 空格 、 笔 划 宽 
度 以 及 整体 轮廓 应 该 要 相近 。Unit Interactive 网 站 上 有 一 篇 关于 这 方面 的 精彩 文章 。” 
按 以 下 代码 修改 我 们 的 字体 。 























GD http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ 
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css3_fonts/stylesheets/style.css 


font-family: "GarogierRegular", Georgia, 
"Palatino", "Palatino Linotype'", 
"Times", "Times New Roman", serif; 


代码 中 提供 了 许多 备 选 字体 , 这 些 字 体 将 帮助 我 们 在 各 种 情况 下 都 能 保持 一 个 相似 的 展示 效 
果 。 也 许 这 不 能 完美 地 适用 于 所 有 的 情形 ， 但 这 种 方式 确实 好 过 使 用 浏览 带 默 认 字 体 ， 要 知道 ， 
有 时 候 默 认 字 体 的 可 读 性 非常 精 糕 。 

恰当 的 字体 设置 大 有 益处 ,能够 让 你 的 页 面 更 具 吸 引力 和 可 该 性 。 你 可 以 目 己 动手 试验 一 下 ， 
有 大 量 免 费 和 商用 字体 在 等 着 你 。 

接 下 来 ， 让 我 们 看 看 如 何 使 用 CSS 来 制作 动画 效果 。 

















8.4 ”实例 26: 通过 过 渡 和 动画 特性 移动 物体 


CSS3 提 供 了 两 种 方法 来 处 理 动 画 效 果 : 过 渡 (transition ) 和 动画 ( animation )。 两 者 在 工作 
方式 上 很 类 似 , 但 出 发 点 明显 不 同 。 过 渡 用 来 摘 述 一 个 属性 由 一 个 值 回 另 一 个 值 逐 渐 改 变 ; 动画 
则 更 具体 一 些 ， 用 来 定义 复杂 动画 的 关键 帧 。 

接 下 来 要 给 在 8.1 市 实现 的 登录 表单 增加 点 趣味 。 产 品 经 理 希 望 看 到 表单 字段 在 获得 用 户 焦 
点 时 呈现 一 个 不 同 颜色 的 淡 入 淡出 效果 , 同时 还 希望 当 用 户 输入 错误 的 用 户 名 和 密码 时 表单 会 昂 
动 。. 可 以 通过 人 简单 的 过 渡 特 性 来 实现 表单 字段 的 淡 入 淡出 效果 , 并 使 用 动画 特性 来 实现 表单 晃动 。 























8.4.1 使 用 CSS 过 渡 特 性 实现 淡 入 淡出 效果 


在 3.5 广 ， 我 们 写 过 一 些 在 元 系 获 得 焦点 时 改变 其 背景 色 的 代码 。 

li>spanlcontenteditable=true] :focust 

background-color: #fTa; 
border: lpx shaded #000, 

} 

像 这 样 直 接 用 新 的 背景 色 和 边界 符 代 原 有 的 样式 是 一 种 比较 唐 突 的 改变 方式 。 但 是 通过 CSS 
过 渡 特 效 ， 我们 可 以 让 这 种 改变 在 一 段 时 间 内 完成 。 所 要 做 的 承 是 定义 如 何 让 过 湾 特 性 生 致 、 应 
该 在 多 长 时 间 内 完成 以 及 应 用 哪些 属性 。 

可 以 使 用 以 下 属性 来 定义 过 渡 特 性 。 


Dtransition-property: 定义 将 应 用 过 渡 效 果 的 CSS 属 性 ; 

口 transition-duration: 指定 过 渡 效 果 执 行 的 时 间 ; 

D transition-deLay: 定义 执行 过 滤 操 作 之 前 的 等 待 时 间 ; 

口 transition-timing-function: 指定 过 渡 过 程 的 中 间 值 如 何 规定 。 





























8.4 实例 26: 通过 过 渡 和 动画 特性 移动 物体 141 
8.4.2 ”理解 调 速 水 数 


还 记得 代数 读 上 老师 让 你 图 解 方程 时 ， 你 还 在 想 不 知 道 以 后 何 时 才 会 用 到 它 的 情形 吗 ? 


transition-timing-function 属 性 描述 了 动画 运动 时 段 内 过 渡 效 果 如 何 随 肴 时 间 变 化 。 我 
们 使 用 三 次 贝 蹇 尔 曲 线 来 指定 调 速 水 数 ， 它 由 图 形 上 的 四 个 控制 点 定义 而 来 。 每 个 点 都 有 一 个 XX 
轴 坐 标 值 和 一 个 Y 轴 坐标 值 , 值 的 范围 从 0 到 1。 第 一 个 和 最 后 一 个 控制 点 通 稼 设 为 (0.0, 0.0) 和 (1.0， 
1.0)， 剩 余 两 个 中 间 点 决定 曲线 形状 。 这 就 是 我 们 定义 动画 的 加 速 昌 线 的 方法 ， 如 果 你 曾经 处 理 
过 动画 ， 或 许 听 说 过 缓 动 (easing ) 这 个 术语 。 

在 规范 中 已 事先 定义 了 几 种 内 建 的 easing 卫 数 : 


D Linear; 











UD ease-1n; 

UD ease-out; 

UD ease-1in-out; 
UD ease。 





如 果 和 希望 动画 匀速 ， 就 选择 Linear; 如 果 和 希望 动画 慢 速 开始 ， 然 后 加 速 ， 就 使 用 ease-in; 
如 果 希 望 动画 慢 速 开始 ， 然 后 加 速 ， 最 后 减速 则 使 用 ease-in-out。 














每 种 哨 数 都 定义 了 一 个 三 次 贝 塞 尔 曲 线 , 虽然 它们 对 于 许多 场景 而 言 足 够 了 , 但 掌握 它们 的 
工作 原理 能 够 帮助 你 借助 cubic-bezier() 函数 来 定义 目 己 的 easing 再 速 函 数 , 接 下 来 了 解 一 下 这 
些 阴 数 。 
linear(〈 线 性， 匀速 ) 曲线 的 控制 点 设 在 两 个 端点 上 ， 形 成 了 一 条 45 度 角 的 直线 。linear 曲 线 
的 四 个 控制 点 分 别 为 ((0.0, 0.0), (0.0, 0.0), (1.0, 1.0), (1.0, 1.0))， 如 图 8-9 所 示 。 8 


图 8-9 


更 复杂 一 些 的 曲线 ， 其 四 个 控制 点 为 ((0.0, 0.0), (0.42, 0.0), (1.0, 1.0), (1.0, 1.07)， 叫 作 ease-in 
(加 速 ) 曲线 ， 如 图 8-10 所 示 。 

在 这 里 ， 只 有 第 二 个 控制 点 发 生 了 改变 ， 它 能 够 影响 线条 左下 角 部 分 产生 曲线 。 因 此 ,动画 
在 开始 时 会 比较 慢 ， 然 后 逐渐 加 速 直至 结束 。 











图 8-10 





相 比 之 下 ,ease-out (减速 ) 曲线 定义 的 动画 以 正常 速度 开始 , 最 后 减速 结束 ,如 图 8-11 所 示 。 


日 








图 8-11 
该 曲线 的 控制 点 为 ((0.0, 0.0), (0.0, 0.0), (0.58, 1.0), (1.0, 1.0))。 
ease-in-out( 加 速 然后 减速 ) 曲线 在 底部 和 顶部 各 有 一 段 曲 线 ( 如 图 8-12 所 示 ): 








图 8-12 


该 曲线 的 四 个 控制 点 为 ((0.0, 0.0), (0.42, 0.0), (0.58, 1.0), (1.0, 1.0))， 动 画 启 动 后 将 逐渐 加 速 ， 
最 后 减速 结束 。 

ease 有 曲线 与 ease-in-out 曲 线 类 似 ， 但 动画 启动 时 的 速度 比 结束 时 稍微 快 一 些 。 

如 果 提 供 四 个 欣 制 点 给 cubic-bezier() 国 数 ， 你 就 可 以 定义 上 自己 的 调 速 晒 数 。 


css3_animation/examples/style.css 

.bouncef{ 
transition-property: left; 
transition-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0); 
transition-duration: 1s; 
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} 
.bounce:hovert 
left: 200px; 
} 
这 个 调 速 国 数 在 动画 开始 时 会 有 个 微微 的 弹跳 将 采 , 第 二 个 控制 点 的 负 值 设置 是 弹跳 效果 产 
生 的 关键 。 由 于 起 始 控制 点 仍然 是 (0.0, 0.0)， 因 此 ， 我 们 能 够 获得 一 个 微微 的 弹跳 效果 。™ 


如 采 你 想 进 一 步 掌 握 三 次 贝 赛 尔 曲线 的 处 理 方法 , 推荐 你 看 一 个 非常 棒 的 样 例 , 它 能 够 帮助 
你 更 好 地 理解 相应 的 坐标 设置 : http://www.netzgesta.de/dev/cubic-bezier-timing-function.html。 





8.4.3 创建 过 渡 特 效 


选择 一 个 字段 时 ,我 们 希望 字段 的 颜色 能 产生 过 渡 效 果 。 要 达成 此 目的 , 我 们 在 表单 元 素 上 
定义 过 渡 属 性 ( transition-property ), 将 设置 里 的 内 容 属 性 ( 如 以 下 代码 中 的 background 及 border 
属性 ) 看 作 过 渡 效 来 的 应 用 源 ， 进 而 通知 浏览 各 监控 其 内 容 属 性 的 变化 ,同时 ,定义 当 内 容 属 性 
发 生 改 变 时 将 产生 怎样 的 动画 效 采 。 

input/type="email"], input/type="password"]t 

transition-timing-function: Linear; 
transition-property: background, border.; 
transition-duration: 0.3s; 


} 

这 是 定义 过 渡 特 效 的 标准 方式 , 但 如 果 你 打算 让 过 渡 效 果 得 到 所 有 浏览 絮 的 支持 , 就 必须 使 
用 之 前 我 们 处 理 其 他 CSS 属 性 时 的 做 法 , 通过 加 上 -webkit- 和 -moz- 等 供应 商 前 级 来 再 次 定义 这 
些 属 性 。 这 将 导致 过 程 及 代码 有 点 宛 长 。 笠 好 有 一 种 专门 针对 该 场景 的 简化 符号 ， 建 议定 义 过 渡 
效果 时 使 用 。 

















css3_animation/stylesheets/style.css 
.Login input/type="email"], .login input/type="password"]t{ 
-webkit-transition: background 0.3s linear 
border 0.3s linear.; 
-moz-transition: background 0.3s linear, 
border 0.3s Linear; 
-0-transition: background 0.3s Linear， 
border 0.3s linear; 
transition: background 0.3s Linear., 
border 0.3s linear.; 


} 
这 种 简化 的 过 渡 属 性 定义 方式 需要 我 们 提供 应 用 过 渡 效 来 的 CSS 属 性 、 过 渡 效 果 执 行 时 长 以 





Q) 实际 上 ， 传 给 cubic-bezierO 函 数 的 是 四 个 控制 点 中 的 第 二 、 三 个 控制 点 ， 因 为 第 一 、 四 个 控制 点 约定 为 (0.0, 0.0)、 
(1.0, 1.0)。 译 者 注 
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及 调 速 果 数 。 我 们 可 以 通过 用 逗号 隅 开 的 方式 ， 指 定 多 个 系列 的 CSS 属 性 、 时 长 和 调 速 咽 数 。 
当然 ， 如 果 你 打算 在 老 版 本 的 Firefox 和 Opera 上 应 用 过 渡 效 果 ， 还 需要 分 别 使 用 -moz- 以 及 
-0- 等 前 级 再 次 定义 这 些 过 渡 属 性 (不 是 指 人 简化 从 号 方式 )， 人 简单 起 见 ， 这 里 就 不 做 展开 。 
我 们 定义 了 过 渡 效 果 的 相关 属性 ， 因此 , 当 我 们 通过 :focus 按 如 下 代码 添加 对 CSS 属 性 的 修 
改 时 ， 浏 览 硕 就 会 顺畅 地 对 背景 色 及 边框 应 用 过 渡 效 果 。 











css3_animation/stylesheets/style.css 

.login input/type="emaitl"]:focus, .login input/type="password"]}]:focust 
background-color: #ffe,; 
border: lpx solid #0e0; 

} 


过 渡 特 性 提供 了 一 种 简单 方式 ， 让 CSS 属 性 从 一 个 值 过 小 到 夯 一 个 值 并 随 之 产生 动画 效 末 ， 
但 这 并 非 实现 动画 的 唯一 方式 。 


8.4.4 利用 CSS3 动画 特性 实现 表单 晃动 效果 


当 我 们 需要 从 一 端 移动 到 另 一 端 ， 或 者 将 CSS 属 性 从 一 种 状态 过 渡 到 另 一 种 状态 时 ， 过 小 特 
性 是 不 错 的 选择 。 但 要 创建 一 个 晃动 或 隆隆 作 啊 的 特效 时 ， 晃 动 的 区 块 会 从 一 边 移 到 另 一 边 , 这 
时 就 需要 一 些 更 高 级 的 功能 来 实现 。 通 过 CSS 的 动画 特性 ”， 可 以 为 动画 定义 关键 帧 。 晃 劲 除了 
将 区 块 左右 来 回 移动 几 次 外 ， 也 没有 什么 稀奇 的 。 


我 们 来 定义 一 个 晃动 的 动画 效果 。 在 stylesheets/style.css 样 式 表 文 件 里 通过 6keyframes 添 加 
关键 帧 的 定义 。 








css3_animation/stylesheets/style.css 

@keyframes shaket{ 
0%{left:0;} 
20%{left: -2%;} 
40%{Left:2%;} 
60%{Left:-2%,;} 
80%{Left:2%;} 
lO00%{ left:0;} 

} 


这 是 定义 动画 效果 的 标准 方式 ， 并 能 够 在 IE 10 以 及 大 多 数 的 Firefox 、Chrome 最 新 版 本 浏览 
右上 呈现 。 但 要 想 在 Safari 上 也 能 够 正常 工作 ， 你 还 需要 使 用 特定 浏览 器 前 级 再 次 定义 关键 帧 ， 
正如 处 理 过 渡 效 果 时 那样 。 











GD http:/www.w3.o0rg/TR/css3-animations/ 
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css3_animation/stylesheets/style.css 


@-webkit-keyframes Shake{ 
%{left:0;,} 
20%{fLeft: -2%;} 
40%{1left:2%;} 
60%{1left:-2%;} 
80%{Lleft:2%,;} 
100%{1left:0;} 

} 


记 住 ， 如 果 还 想 文 持 其 他 浏览 硕 ， 就 需要 使 用 -moz-、-opera- 等 前 缀 继续 定义 关键 帧 。 


我 们 已 经 定义 了 时 动 效果 所 需 的 关键 帧 ， 接 下 来 可 以 将 动画 歼 采 应 用 到 一 个 CSS 规 则 上 。 只 
有 在 用 户 提交 了 表单 并 捕捉 到 用 户 名 和 密码 错误 时 才 会 触发 晃动 效果 。 因 此 ,我们 通过 jQuery 捕 
捉 提 交 事 件 并 触发 一 个 Ajax 请 求 。 之 后 ， 给 表单 添加 一 个 shake 类 ， 用 来 触发 晃动 。 移 在 样式 表 
里 添加 shake 规 则 ， 代 码 如 下 所 示 。 
.Shakef{ 
animation-name: shake ; 
animation-duration: 0.5S， 
animation-delay: 0; 
animation-iteration-count: 1; 
animation-timing-function: linear.; 

















wy 








这 个 标记 与 定义 过 渡 特 性 时 的 方式 非 肖 类 似 。 我 们 对 动画 、 调 速水 数 、 时 长 、 延 时 以 及 重复 
次 数 进行 了 设 定 。 

这 里 仍然 需要 较 多 的 代码 , 特别 是 需要 顾及 添加 特定 训 览 带 前 绥 的 情况 。 我 们 依旧 通过 简化 
从 写 来 减少 代码 量 。 








css3_animation/stylesheets/style.css 
.Shaket 
-webkit-animation: shake 0.5s 1; 
-moz-animation: shake 0.5s 1; 
animation: shake 0.5s 1; 


} 
以 上 就 是 CSS 代 码 。 现 在 我 们 只 需 在 表单 提交 失败 时 应 用 该 CSS 样 式 即 可 。 首 先 ， 创建 一 个 
新 文件 javascripts/form.js， 并 编写 一 个 处 理 Ajax 请 求 的 函数 。 








css3_animation/javascripts/form.js 
Var processLogin = function(form, event){ 
event.preventDefault()}); 
Var request = $.ajax(t{ 
UE L007 3 
type: "POST", 
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data: form.serialize(), 
datalype: "Json" 
上 


redquest .done = function(){ 
// 登录 表单 Ajax 请 求 操 作成 功 后 的 处 理 
}; 
return(request); 
}; 
这 个 因数 有 两 个 参数 : 一 个 jQuery 对 象 ( 包含 应 被 提交 的 表单 )， 以 及 对 应 的 表单 事件 。 我 
们 阻止 了 事件 的 默认 行为 ， 然 后 创建 Ajax 请 求 ， 传 人 序列 化 表单 的 数据 ( 将 表单 提交 的 元 系 值 编 
译 成 字符 路 
我 们 通过 jQuery 提供 的 异步 编程 Promise 模 式 ， 定 义 服务 端 返回 成 功 啊 应 时 的 动作 。Promise 
模式 可 以 让 我 们 避免 膀 套 回调 的 代码 编写 方式 。 
jQuery 的 $.ajax() 方 法 返回 一 个 实现 了 Promise 接 口 的 对 象 。 在 $.ajax() 方 法 内 定义 
success() 回 调 函 数 的 做 法 已 过 时 , 我 们 在 $.ajax() 返 回 的 对 象 上 定义 done() 和 fail() 回 调 
消 数 。 这 些 回 调 也 数 在 Ajax 请 求 完成 或 者 请 求 已 结束 时 就 会 被 调用 。 这 样 一 来 ,我 们 就 可 以 以 
Promise 编 程 方式 定义 回调 函数 , 程序 其 他 部 分 也 可 以 使 用 这 些 代 码 。 同 时 , 这 也 能 够 帮助 我 们 
将 代码 分 割 成 更 小 的 代码 块 ， 而 不 是 全 部 堆砌 在 一 个 胱 肿 的 回调 函数 中 。 要 深入 了 解 Promise 
模式 ， 推 在 阅读 Trevor Burnham 的 Async JavaScript: Build More Responsive Apps with Less 
Code[Bur12] 一 书 "”。 


我 们 已 经 在 processLogin() 函 数 里 定义 了 done() 回 调 函 数 。 要 使 得 登录 失败 时 表单 产生 
晃动 效果 ， 需 要 创建 两 个 事件 监听 龙 。 第 一 个 监听 需 处 理 表 单 提 交 事 件 ， 并 调用 我 们 刚刚 写 好 
的 processLogin() 困 数 。processLogin() 图 数 返 回 Ajax 请 求 对 象 ， 由 于 该 请 求 对 象 实现 了 
Promise 接 口 ， 因 此 ， 我 们 现在 就 可 以 定义 faitL() 回 调 晒 数 , 在 fail() 里 ,我们 把 shake 类 应 用 
到 表单 上 。 









































css3_animation/javascripts/form.js 


var addFormSsubmitWithCSSAnimation = function()})t 
$(". login").submit (function(event)t{ 
Var form = $(this).; 
request = processLogin(form, event); 
request.fail (function(){ 
form.addClass("shake"); 
1 
站 
所 


GD 本 书 中 文 版 《JavaScript 异 步 编程 : 设计 快速 啊 应 的 网 络 应 用 》 已 由 图 灵 教 育 引 进出 版 : http:/www.ituring.com.cn 
/book/1132。 一 一 译 者 注 
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一 旦 动画 执行 完毕 ， 我 们 需要 移 除 shake 类 ， 以 便 下 一 次 表单 提交 ( 且 提 交 失 败 ) 时 还 可 以 
执行 晃动 动画 。animationEnd () 事 件 在 动画 结束 时 触发 ， 因 此 ， 我 们 需要 为 该 事件 定义 一 个 事 
件 处 理 函 数 。 只 不 过 ， 这 些 事 件 同 样 需 要 加 上 特定 前 级 ， 我 们 不 得 不 继续 面面俱到 。 





css3_animation/javascripts/form.js 
var addAnimationEndListener = function()f{ 
$(". Login").on 
("webkitAnimationEnd oanimationend msAnimationEnd animationend", 
下 im 着 十 了 
| LWIA Yll LC 也 
$(this).removeClass("shake"); 
) 
I 


最 后 ， 调 用 添加 了 侦 听 融 的 方法 。 


css3_animation/javascripts/form.js 


addFormSubmitWithCSsSAnimationt()}).; 
addAnimationEndListener(): 


现在 ， 当 我 们 点 击 提 区 按钮 ， 请 求 失败 并 产生 了 表单 晃动 效果 。 可 以 把 这 些 JavaScript 代 码 写 
在 一 个 大 子 数 里 ,但 通过 将 其 变 成 较 小 的 代码 块 并 使 用 Promise 模 式 ， 为 那些 不 支持 动画 特性 的 
浏览 器 添加 回 退 方案 的 工作 就 会 变 得 容易 许多 。 











8.4.5 ” 回 退 方案 


实现 过 渡 及 动画 效果 的 最 佳 回 退 方案 是 使 用 jQuery 库 。 我 们 需要 同时 使 用 jQuery 库 和 jQuery 
Color 搬 件 ， 此 外 ， 考 虑 到 各 种 浏览 器 对 HTMLSMCSS3 的 支持 程度 不 同 ， 我 们 还 需要 Modernizr 库 
来 侦 测 其 支持 程度 并 调用 合适 的 处 理 代 码 。 


首先 ， 在 <head> 标 签 里 添加 Modernizr 库 的 引用 ， 如 同 我 们 在 3.1 节 所 做 的 那样 ， 此 外 ， 也 同 
样 按 3.1 节 讲述 的 方式 处 理 Load ( ) 也 数 。 














css3 animation/index.html 


<script src="javascripts/modernizr.1s"></script> 


接 下 来 ， 下 载 jQuery Color 插 件 并 放 在 javascripts 文 件 夹 内 ， 我 们 需要 该 插件 来 处 理 动画 效果 
的 颜色 部 分 。” 


现在 ， 我 们 来 处 理 实际 的 回 退 代码 。 





GD http://code.jquery.com/color/jquery.color-2.1.2.min.js 
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1. 通过 jQuery 处 理 过 渡 效 果 

当 我 们 选择 一 个 文本 框 ， 想 要 实现 同样 的 淡 入 淡出 效果 时 ， 可 以 通过 jQuery 的 animate() 方 
法 来 实现 。 然 而 ,我 们 不 得 不 使 用 两 个 事件 : 当 字 段 获得 焦点 时 ， 我 们 布 望 淡 和 人 效果 为 黄色 ; 失 
去 焦点 时 ， 则 和 希望 颜色 淡出 回 到 白色 。 以 下 是 实现 代码 : 





css3_animation/javascripts/form.js 
var addTransitionFallbackListeners = function()t 
$(". Login input[type=email], .login input[type=password]}").focus(function()t{ 
$(this).animate l(t 
backgroundColor: "#ffe" 
},， 300 ) 
1 
$(". login inputltype=email], .login input[type=password]}").blur(function()}t{ 
$(this).animate(t{ 
backgroundColor: "#fff" 
p30007, 
1 
和 


我 们 在 一 个 吗 数 内 定义 了 这 两 个 事件 。 接 下 来 ， 使 用 Modernizr 库 检测 浏览 紫 对 过 渡 特 性 的 


支持 情况 ,如 果 浏 览 右 不 支持 该 特性 ， 则 加 载 jQuery color 插 件 ， 然后 定义 回调 函数 以 调用 上 面 的 
addTransitionFaLLbackListeners 国 数 。 


css3_animation/javascripts/form.js 
Modernizr. Load( 


{ 
test: Modernizr.csstransitions, 
nope: "Javascripts/jquery.color-2.1.2.min.1s", 
callback: function(url, result)t 
if (!result)t 
addTransitionFaLLbackListeners( ) ; 
} 
} 
} 
) 


ER 过 渡 殖 末了。 有 了 jQuery， 添 加 过 渡 殖 采 承 变 得 非常 容 匈 。 接 下 来 讨论 动画 


2. 通过 jQuery 处 理 动 画 效果 


还 可 以 通过 jQuery 的 animate() 方 法 来 实现 表单 的 晃动 特效 。 在 javascripts/form.js 文 件 里 , 定 
义 一 个 新 的 addFormSubmitwithFallback( 人 在 其 中 调用 我 们 已 有 的 
processLogin() 方 法 ， 并 定义 fail() 回 退 方 法 。 这 和 前 面 的 处 理 类 似 ， 只 是 这 次 我 们 用 jQuery 
来 实现 表单 晃动 动画 。 
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css3_animation/javascripts/form.js 
var addFormSubmitWithFallback = function()t{ 
$(". Login").submit(function(event)t 
Var form = $(this)}); 
request = processLogin(form, event); 
request.fail (function(){ 
form.animate({{left: " 


.animate({left: "2%"}, 100) 
.animate({left: "-2%"}, 100) 


.animate({left: "2%"}, 100) 
.animate({left: "0%"}, 100);， 
Fy 
}); 
pa 
最 后 ， 使 用 Modernizr 库 来 检测 浏 览 右 对 动画 特性 的 文 持 情况 。 如 果 浏 览 硕 文 持 动画 特性 ， 
则 使 用 原 有 方法 。 如 果 不 文 持 动 画 特性 ， 就 调用 刚刚 实现 的 addFormSubmitwithFaLLback() 回 
退 浮 数 ， 该 函数 仍 调用 前 面 实 现 的 表单 处 理 代 人 码 ， 但 所 不 同 的 是 ， 这 次 是 在 fail() 方 法 中 通过 
回 退 代码 来 处 理 动画 效果 。 

















css3_animation/javascripts/form.js 
> if(Modernizr.cssanimations)t 
addFormSubmitWithCSSAnimation(); 
addAnimationEndListener(); 
> }eLse{ 
> addFormSubmitWithFaltlback(); 
> } 
有 少量 代码 是 重复 的 ,但 通过 将 大 部 分 通用 代码 移 到 一 个 通用 函数 里 ,代码 就 会 更 便于 管理 。 
再 加 上 这 样 做 之 前 已 经 对 Promise 模 式 有 所 了 解 ， 因 此 ， 我 们 做 得 还 不 错 。 
再 花 点 时 间 回 顾 一 下 我 们 所 做 的 ,并 思考 一 下 这 人 么 做 是 否 有 必要 。 如 本 草 其 他 部 分 所 提 到 的 ， 
这 些 工作 可 能 并 不 值得 你 花 太 多 时 间 ， 其 至 没 必要 创建 回 退 方案 。 假设 只 有 15% 的 用 户 看 不 到 哟 
动 效果 ,你 还 会 在 乎 吗 ” 有 能 力 创建 回 退 方案 并 不 意味 着 就 应 该 创建 它 ， 当 然 , 除非 这 件 事 关 平 
你 的 薪水 。 


8.5 ”未 来 展望 

本 音 我 们 探讨 了 一 些 使 用 CSS3 技 术 替 代 传 统 Web 开 发 技术 的 新 方式 ， 但 也 只 是 浅 尝 轰 止 。 
CSS3 规 范 还 包含 了 3D 转 换 、 多 边框 图 片 、 倒 影 ， 甚 至 还 包含 了 图 片 滤 镜 效果 。 

当 CSS3 模 块 最 终 完 成 时 ， 随 着 表现 层 与 行为 的 进一步 分 离 ， 为 用 户 开 发 出 更 好 、 更 丰 宣 、 
更 引人入胜 的 界面 元 素 的 工作 将 会 轻松 很 多 。 现 在 ， 使 用 jQuery 开发 的 效果 完全 可 以 通过 CSS 来 
实现 , 从 创建 简单 的 某 单 到 创建 复杂 的 可 折 和 县 面板 都 没有 问题 。 要 留意 规范 的 进展 , 并 不 断 探 索 。 















































标记 之 外 


我 们 已 经 探讨 了 HIMLS 和 CSS3 的 标签 ,现在 ， 
让 我 们 将 注意 力 转 回 与 HTML5 相关 的 一 些 技术 和 
特性 上 。 这 些 新 特性 能 够 满足 我 们 在 跨 域 通信 、 创 
建 离线 应 用 解决 方案 、 管 理 浏 览 器 历史 记录 、 创 建 
更 具有 交互 性 的 界面 以 及 实现 与 服务 如 间 持 入 连 接 等 
方面 的 需求 。 

其 中 一 些 特性 已 从 HTML5 规范 中 分 拆 了 出 来 。 
其 余 的 特性 则 从 未 成 为 过 HIMLS 规范 中 的 一 部 分 ， 
但 浏览 器 生 产 厂 商 和 开发 者 早已 将 它们 跟 HIML5 
紧密 联系 在 了 一 起 ， 因 为 HIMLS 规 疙 始终 跟 这 些 
特性 一 同 实现 和 演进 。 无 论 是 HIMLS， 还 是 这 些 新 
特性 ， 都 是 创建 更 丰富 体验 应 用 的 “ 神 兵 利 絮 ”。 











户 病 效 据 储存 





cookie 技 术 很 牛 ” 相信 跟 你 一 样 ， 我 也 深 表 怀疑 ! 目 从 cookie 技 术 问 世 以 来 ， 它 就 总 折 麻 看 
开发 人 员 ， 但 我 们 不 得 不 忍受 着 这 种 折磨 ， 因 为 它 是 唯一 可 靠 的 客户 端 数据 存储 技术 。 

要 使 用 cookie ,我们 不 得 不 为 其 命名 并 设置 存活 期 限 。 这 迫使 开发 人 员 编 写 一 堆 的 JavaScript 
代码 ， 并 用 函数 将 其 封 淡 起 来 ， 为 的 是 不 用 再 重复 回想 它 的 实现 方式 ， 如 以 下 代码 : 














html5_localstorage/setcookie.js 
// 3 引 自 http://www.javascripter.net/faq/settinga.htm 
function SetCookie(cookieName,cookieValue,nDays) { 
Var today = new Date() ; 
Var expire = new Date() ; 
if (nDays==nuyull || nDays==0) nDays=1; 
expire.setTime(today.getTime() + 3600000*24*nDays); 


document .Cookie = cookieName+"="+escape (cookieValue) 
+ "expires="+expire.toGMTString(); 


} 

除了 难以 记 住 的 语句 ，cookie 还 存在 着 安全 担忧 。 一 些 网 站 利用 cookie 来 跟 踊 用 户 的 上 网 行 
为 ， 因此， 用 户 常 以 某 种 方式 禁用 它 ， 或 者 频繁 删除 它 

HTML5 引 入 了 客户 端 数据 存储 的 新 方法 : Web Storage ( 使 用 localStorage 或 sessionStorage )"、 
IndexedDB“ 以 及 Web SQL Databases“。 这 些 新 技术 强大 到 令 人 难以 置信 ,而且 相当 安全 。 最 可 喜 
的 是 ， 这 些 技术 目前 都 已 被 几 种 浏览 硕 实 现 了 ， 包 括 iOS 平 台 的 Safari 以 及 Android 2.0 的 浏览 
从 技术 上 讲 ， 他 们 不 是 HTML5S 规 范 的 一 部 分 了 ， 因 为 他 们 已 经 形成 了 上 自己 的 规范 。 


虽然 这 些 实现 无 法 替代 cookie 用 于 在 客户 端 和 服务 端 共享 的 目的 一 一 如 在 Web 应 用 中 使 用 
cookie 来 管理 跨 请 求 状态 一 一 cookie 可 用 于 存储 用 户 个 人 所 需 数据 ， 诸 如 界面 设置 或 偏好 设置 。 
但 它们 在 构建 移动 应 用 时 就 能 派 上 用 场 了 ,因为 这 些 应 用 能 够 在 浏览 需 上 运行 , 但 又 不 会 时 刻 保 





























GD http:/www.w3.org/TR/webstorage/ 
@) http:/www.w3.oreg/TR/IndexedDB 
(3) http:/www.w3.org/TR/webdatabase/ 
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持 网 络 连接 。 当 前 许多 的 Web 应 用 通过 调用 服务 带 问 的 服务 来 存储 用 户 数据 , 但 目 打 有 了 这 些 新 
的 数据 存储 机 制 之 后 , 联网 对 于 应 用 而 言 就 不 再 是 必 选 项 了 。 用 户 数据 可 以 存储 在 本 地 ， 只 有 在 
必要 时 ， 才 将 其 备份 或 同步 到 服务 从。 


当 你 将 这 些 技术 与 HTML5 的 离线 新 特性 结合 起 来 ， 就 能 够 在 浏览 器 上 创建 完整 的 数据 库 应 
用 ， 并 能 在 竟 面 电脑 、 平 板 电脑 力 至 智能 手机 等 各 种 平台 上 运行 。 本 音 ， 你 将 学 到 如 何 利 用 这 些 
技术 来 保存 用 户 设置 ， 并 创建 一 个 简单 的 注意 事项 数据 库 。 
我 们 将 探讨 下 列 特性 。 
口 LocalS torage: 以 键 / 值 对 方式 存储 数据 ， 绑 定 到 某 个 域 , 并 存储 路 浏览 大 会 话 数 据 (CS、 
F3.3S、S4、IE8、O10.$S、iOS 3.2、A2.1 )。 
D sessionS torage: 以 键 / 信 对 方式 存储 数据 ， 绑 定 到 某 个 域 ， 当 浏览 硕 会 话 结束 时 数据 
将 被 删除 (C5、F3.5、S4、 IE8、0O10.5、iOS 3.2、A2.1 )。 
口 IndexedDB: 通过 一 个 浏览 锅 内 建 对 象 存 储 吉 (在 IndexedDB 中 称 为 object store， 也 就 是 通 
当 意 义 上 的 数据 表 ), ， 存 储 路 会 话 数 据 (C25、F 10、IE 10 )。 
口 Web S QL Databases: 一 个 完整 的 关系 型 数据 库 ， 文 持 创建 表 、 插 和 人、 和 更新、 删除、 查询 
等 操作 ， 并 支持 事务 。 绑 定 到 某 个 域 , 存储 跨 会 话 数据 。 但 已 不 再 是 活动 的 规范 了 (CS、 
S3.2、 O10.5、iOS 3.2、A2 )。 
口 离线 Web 应 用 : 定义 离线 使 用 的 缓存 文件 ， 人 允许 应 用 在 离线 状态 下 运行 4(C4、F3.5、S 4、 
O 10.6、iOS 3.2、A2 )。 











9.1 实例 27: 用 Web Storage 存储 偏好 设置 


Web Storage 机 制 为 开发 人 员 提 供 了 一 种 通过 浏览 紫 内 建 的 键 / 值 存储 方式 进行 客户 并 数据 存 
储 的 简单 方法 。 只 需要 极 少 量 的 JavaScript 代 码 ， 就 能 轻 匈 完成 存储 或 获取 简单 数据 串 的 操作 。 它 
是 最 流行 的 客户 端 存 储 API 之 一 ，I8、 老 版 本 iOS 及 Android 浏 览 器 都 支持 它 。 

Web Storage 的 LocatLStorage 方 式 ， 其 保存 的 是 浏览 硕 会 话 间 的 数据 ， 且 不 能 被 其 他 网 站 访 
问 ， 因 为 它 受 限于 你 当前 访问 的 网 站 。 当 你 在 本 地 开发 应 用 时 ,需要 留意 一 下 ， 如 果 你 使 用 一 个 
如 LocaLhost 这 样 的 本 地 服务 锅 ， 一 不 小 心 就 很 容易 混 消 各 种 变量 , 接 下 来 就 不 得 不 频 尝 地 要 求 
浏览 硕 清 除 存 储 数据 。 

AwesomeCo 公 司 正 在 开发 一 个 新 的 客户 服务 门户 , 并 希望 用 户 能 够 更 改 网 站 文本 大 小 、 背 景 
以 及 文本 颜色 。 我 们 将 用 Web Storage 技 术 来 实现 这 个 需求 ,以便 在 我 们 保存 更 改 后 ,， 这些 数据 后 
续 还 能 被 新 的 浏览 如 会 话 恢 复 并 使 用 。 这 些 工 作 人 处理 完 之 后 ， 我 们 的 原型 效果 图 如 下 所 示 。 
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Preferences 


Colors 
Backeround color 


[| 


Text color 


Text size 
| 20px = | 





| Save changes | 








图 9-1 偏好 设置 页 面 


9.1.1 创建 仿 好 设置 表单 


我 们 来 用 一 些 语 义 性 的 HTML5 标 记 以 及 第 3 革 中 提 到 的 新 控件 来 打造 仿 好 设置 表单 。 我 们 硕 
望 用 户 能 够 日 己 更 改 前 景色 、 背 景色 以 及 字体 大 小 。 














htmls_localstorage/index.html 


<IDOCTYPE himl> 
<html lang="en-US"> 
<head> 
<meta charset="utf-8"> 
<title>Preferences</title> 
<link rel="stylesheet" href="stylesheets/style.css"> 
<script src="jJavascripts/modernizr.js"></script> 
</head> 
<body> 
<div id="container"> 
<p><strong>Preferences</strong></p> 
<form id="preferences" action="save prefs" 
method="post" accept-charset="utf-8"> 
<fieldset id="colors" class=""> 
<Legend>CoLors</Legend> 
<OL> 
<L1> 
<label for="background color">Background color</Llabel> 
<input class="color" type="color" name="background color" 
value="" id="background color"> 
</1i> 
<L1> 
<LabelL for="text coLor">Text color</label> 
<input class="color" type="color" name="text color" 
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value="" jd="text color"> 


</1i> 
<LI> 


<LabelL for="text size">Text size</\label> 
<select name="text size" id="text size"> 


<option 
<option 
<option 
<option 
</select> 
</ol> 
</fieldset> 


value="16">16px</option> 
value="20">20px</option> 
value="24">24px</option> 
value="32">32px</option> 


<input type="submit" value="Save changes"> 


</form> 
</div> 
</body> 
</html> 








我 们 将 使 用 代码 来 设置 颜色 ， 并 将 相应 字段 类 型 设置 为 颜色 字段 ( type="color" )。 同 时 ， 再 


添加 一 些 样式 来 设置 表单 。 


html5_localstorage/stylesheets/style.css 


form DLL 
list-style: none ; 
margin: 0; 
padding: 0; 

} 


form LIT{ 
margin: 0; 
padding: 0 
} 


form li label{ display:block; } 


通过 以 上 工作 ,偏好 设置 原型 就 准备 好 了 ,现在 来 保存 更 改 表 单 上 的 偏好 设置 后 的 结果 数据 。 





9.1.2 保存 及 恢复 仿 好 设置 数据 


想 要 使 用 LocalStorage 方 法 ， 我 们 需要 通过 JavaScript 来 访问 window.1localStorage() 对 
象 。 设 置 一 个 名 字 / 信 对 (保存 操作 ) 的 方法 很 简单 ， 如 以 下 代码 所 示 。 


html5_localstorage/javascripts/storage.js 


localStorage.setltem("background color", $("#background color").val()); 


取 回 一 个 值 同 样 很 傈 单 。 
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html5_localstorage/javascripts/storage.js 


Var bgcolor = LocaLsStorage ,getItem( backogrounad color"), 


接 下 来 ， 创 建 一 个 方法 ， 保 存 表 单 操 作 的 所 有 设置 数据 。 创 建新 文件 javascripts/storage.js 并 
添加 以 下 代码 : 


html5_localstorage/javascripts/storage.js 

Var save settings = function()t 

localStorage.setltem("background color", $("#backgroungd color").val()); 
localStorage.setltem("text color", $("#text color").val()); 
localStorage.setltem("text size", $("#text size").val()); 

apply preferences to page(); 


下 ， 
这 个 方法 取出 表单 字段 的 值 ， 并 将 这 些 值 通过 人 键 / 值 对 方式 (作为 键 / 值 对 中 的 “ 值 ”) 保存 到 
LocaLStorage 中 。 


现在 ， 继 续 创建 一 个 类 似 的 方法 ， 从 tlocalStorage 中 取 回 数据 值 并 设置 到 表单 字段 中 去 。 





html5_localstorage/javascripts/storage.js 

var load settings = function()+ 
var bgcolor = localStorage.getltem("background color"), 
var text color = localStorage.getltem("text color"), 
Var text sjize = localStorage.getltem("text size"); 


$("#background color").val (bgcolor); 
$("#text_ color").val(text_color); 
$("#text size").val(text size),; 


apply_ preferences to page(); 
} 
这 个 方法 同样 调用 了 一 个 叫做 apply_preferences to_page() 的 方法 ,该 方法 应 用 相关 偏 
好 设置 值 到 页 面 本 里 ， 以 使 页 面 发 生变 化 。 下 面 我 们 就 来 实现 它 。 
9.1.3 ”为 页 面 应 用 仿 好 设置 值 


现在 ,可 以 从 localStorage 获 取 偏 好 设置 值 了 ,获取 这 些 值 后 ,还 需要 将 其 应 用 到 页 面 上 。 
我 们 涉及 的 偏好 设置 操作 在 某 种 程度 上 都 依赖 于 CSS 技 术 ， 因 此 ， 在 这 里 ， 我 们 通过 jQuery 来 更 
改元 素 的 样式 。 

















html5_localstorage/javascripts/storage.js 


var apply_preferences to page = function()t{ 
$("body").css("backgroundColor", $("#background color").val()); 
$("body").css("color", $("#text color").val()); 
$("body").css("fontSize", $("#text size").val() + "px"); 

}; 
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后 ， 在 storage.js 肢 本 文件 的 底部 添加 以 下 代码 : 


html5_localstorage/javascripts/storage.js 
Load settings(); 


${'form#preferences').submit(function(event)})1{ 
event .preventDefauLt( ) ; 
Save settings(); 
ys 
还 有 一 件 事情 需要 人 处理 ， 那 就 是 当 HTML 页 面 加 载 时 ， 加 载 我 们 的 脚本 文件 和 jQuery 库 。 将 
以 下 两 行 添加 到 </body> 闭 标签 之 前 。 








htmls_localstorage/index.html 

<script src="http://ajax.googleapis.com/ajax/libs/j9query/1.9.1/j9uery.min.Js"> 
</script> 

<script src="Javascripts/storage.i;s"></script> 


现在 来 设置 存储 融会 话 的 数据 保存 。 


sessionStorage 


可 以 使 用 LocalSto Se j 览 器 关闭 时 布 望 保 存 的 数据 , 但 有 时 浏览 器 是 打开 的 ， 
我 们 希望 保存 数据 直到 会 话 结束 。 这 就 到 了 sessionStorage 发 挥 作 用 的 时 候 了 。 
a de oe 但 sessionStorage 保 存 的 内 容 在 浏览 

器 会 话 结束 时 即 消 除 干净 。 现 在 你 应 该 获取 sessionStorage 对 和 象 ， 而 不 是 LocalStorage 
对 象 。 
sessionStorage.setlitem('name', 'Brian Hogan'); 


var name = sessionStorage.getItem( 'name' ); 


这 可 比 cookie 方 式 便捷 多 了 ， 


9.1.4 ” 回 退 万 且 


LocaLStorage 方 法 可 以 在 所 有 现代 浏览 硕 以 及 部 分 老式 浏览 右上 应 用 ， 因 此 ， 我 们 并 不 需 

要 客户 问 回 退 方法 。 然而, 保存 于 LocalStorage 中 的 数据 ， 是 无 法 与 服务 问 或 其 他 电脑 共享 的 。 
也 就 是 说 , 如 果 用 户 在 家 里 的 电脑 上 做 了 设置 更 改 , 这 些 改变 就 无 法 应 用 到 其 工作 电脑 上 。 此 外 ， 
各 采用 户 树 杰 用 了 JavaScript，LocalStorage 就 无 法 工作 了 。 所 以 ,一 个 好 的 回 退 方案 应 该 也 要 将 
这 些 设 置 数据 保存 到 服务 闪 上 。 对 于 此 类 应 用 , 可 以 在 用 户 提 交 时 将 设置 数据 保存 到 服务 端 ， 并 
关联 到 具体 用 户 的 记录 上 。 这 需要 将 表单 打造 成 可 以 直接 提交 数据 给 服务 端 , 并 涉及 修改 页 面 程 
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序 , 以 便 在 无 法 进行 客户 端 设置 的 情况 下 , 能 够 通过 服务 器 端 保存 设置 数据 的 方式 来 确保 功能 
常 。 但 在 这 里 ， 服 务 器 端的 解决 方案 不 在 本 书 范围 之 内 ， 读 者 可 以 自己 尝试 一 下 。 


Web Storage 技 术 对 于 存储 小 块 数据 而 言 不 失 为 一 种 简单 的 方式 ,但 它 在 移动 设备 上 会 遇 到 性 能 
限制 , 且 不 适合 用 于 保存 大 量 数据 。 接 下 来 , 我 们 来 看 看 如 何 才 能 存储 结构 更 为 复杂 的 客户 问 数 据 。 








9.2 实例 28: 使 用 IndexedDB 将 数据 存储 到 客户 端 数据 库 中 


LocaLStorage 和 sessionStorage 方 法 提供 了 一 种 简单 方式 , 让 我 们 可 以 在 客户 端 存 储 简 
单 的 名 字 / 值 对 数据 ， 但 它们 还 无 法 满足 我 们 的 所 有 需求 。HTMLS 规 范 最 初 引 和 了 将 数据 保存 
到 关系 型 数据 库 中 的 能 力 。 后 来 ， 存 储 部 分 的 内 容 被 剥离 到 了 一 个 叫 Web SQL Database 的 单独 
规范 中 。™ 


只 要 编 过 一 点 儿 的 SQL 语句 ， 都 不 会 对 Web SQL Database 技 术 感 到 陌生 。 不 过 ， 规 范 废弃 了 
Web SQL Database， 转 而 支持 IndexedDB。IndexedDB 是 个 非常 强大 的 对 象 数据 库 ， 虽 然 在 使 用 上 
有 些 复杂 。 接 下 来 讨论 IndexedDB 在 创建 简单 的 客户 端 Web 应 用 方面 的 实践 。 但 在 这 之 前 ， 你 要 
做 好 心理 准备 ,因为 本 实例 会 编写 大 量 元 长 的 代码 。 但 鉴于 能 够 实现 一 个 灵活 的 方式 来 存储 客户 
曾 数 据 ， 这 种 努力 还 是 值得 的 。 

AwesomeCo 公 司 想 要 为 它 的 人 管 销 团 队 提供 一 个 简单 的 应 用 , 以 收集 旅途 中 的 注意 事项 。 该 应 
用 需要 为 用 户 提供 创建 新 事项 的 功能 ， 并 让 用 户 修 改 及 删除 存在 项 。 
































9.2.1 注意 事项 表面 


注意 事项 界面 包括 一 个 左边 栏 ， 里 面 放 的 是 已 有 事项 的 列表 ,右边 有 个 表单 ,表单 由 一 个 标 
题字 段 以 及 一 个 较 大 的 多 行文 本 区 域 组 成 ， 用 来 新 建 事 项 。 界 面 效 果 如 图 9-2 所 示 。 














New note Delete all | Title 
Get Wonderflonium Note Sa 
Build freeze ray 
Do laundry 


Post on blog 





图 9-2 ”注意 事项 界面 
首先 ， 我 们 需要 对 界面 进行 编码 。 





GD http://dev.w3.org/html5/webdatabase/ 
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htmlSs_indexedDB/index.html 


<!IDOCTYPE htmL> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>AwesomeNotes</title> 
<link rel="stylesheet" href="stylesheets/style.css'"> 
<script src="7avascripts/IndexedDBShim.min.js"></script> 
</head> 
<body> 
<div id="container'"> 
<section id="sidebar"> 
<input type="button" id="new button" value="New note"> 
<input type="button" id="dgelete alit button" value="Delete all"> 
<ul aria-live="polite" id="notes'"> 
</ul> 
</section> 
<section id="main" a 
<form> 
<OL> 
<li> 
<label for="title">Title</label> 
<input type="text" id="title'"> 
</\i> 
<LIL> 
<label for="note">Note</label> 
<textarea id="note"></textarea> 
</\i> 
<LIL> 
<input type="submit" id="save putton" value="Save'"> 
<input type="submit" id="delete button" value="Delete"> 
</LI> 
</ol> 
</form> 


</section> 
</div> 


</body> 
</html> 


我 们 使 用 <section> 标 签 定 义 了 侧 边栏 以 及 主要 内 容 区 块 , 并 给 每 个 重要 的 用 户 界面 控件 分 
配 了 ID， 诸 如 保存 按钮 。 这 将 更 方便 我 们 定位 元 系 ， 以 绑 定 事件 监听 体 。 


我 们 还 需要 一 个 样式 表 ， 以 设置 样式 让 界面 效果 如 图 9-2 所 示 。 这 个 样式 文件 style.css 的 代码 
如 下 : 


html5_indexedDB/stylesheets/style.css 


#containert 
margin: 0 auto, 
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width: 80Q%; 

} 

#sidebar, #maint{ 
display: block; 
float: left, 

} 


#main{ width: 80%; } 
#Ssidebar{ width: 20%,;} 


form oli 
list-style: none ; 
margin: 0; 
padding; 0; 

} 


form 1i, #sidebar LIL{ 
margin: 0; 
padding: 09; 

} 


form LL label{ display:block; } 


#note, #titlef{ 
border: lpx solid #000; 
font-size: 20px; 
width: 100%,; 

} 


#sidebar ulf{ 
list-style:; none 
padding: 0; 
}; 
#sidebar LI{f cursor: hand; cursor: pointer; } 


#title{ height: 20px; } 

#note{ height: 80px; } 

这 个 样式 表 消 除 项 目 符 号 , 设置 多 行文 本 字段 大 小 ， 并 设置 两 栏 布局 。 随 着 界面 的 完成 ， 接 
下 来 ， 我 们 来 编写 JavaScript 实 现代 人 码 。 
9.2.2 创建 并 连接 数据 库 

创建 新 文件 javascripts/notes.js， 我 们 将 把 所 有 的 应 用 逻辑 都 放 在 这 里 面 。 同时， 确保 该 文件 
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最 终 添 加 在 index.html 的 </body> 闭 标签 之 前 ， 紧 邻 jQuery 库 的 加 载 位 置 ， 但 jQuery 库 的 加 载 位 置 
在 其 之 上 ， 我 们 使 用 jQuery 来 处 理事 件 以 及 简单 的 DOM 操 作 。 


html5_ indexedDB/index.html 
<SCrILpt 
src="http://ajax.googleapis.com/alax/ libs/Tquery/1.9.1/J79uery.min.]s"> 
</script> 
<script src="yavascripts/notes.1s"></script> 


在 javascripts/notes.js 文 件 里 ， 为 应 用 程序 设置 一 些 变 量 。 





html5_indexedDB/javascripts/notes.js 

// 数据 库 引 用 

var db = null; 

window.indexedDB = window.indexedDB || window.mozIndexedDB || 
window.webkitIndexedDB | |window.msIndexedDB, 


我 们 在 脚本 文件 的 开始 处 声明 db 变量 , 后 续 创 建 的 方法 将 用 到 该 变量 。 这 里 将 这 些 变量 置 于 
全 局 作用 域 ， 这 并 不 总 是 一 个 好 主意 。 在 这 个 例子 中 ， 我 们 会 尽力 确保 JavaScript 代 码 人 简洁 明了 。 


接 下 来 定义 window.indexedDB 变 量 , 但 是 不 同 的 浏览 大 有 者 不 同 的 对 象 名 称 。 坟 运 的 是 ， 
尽管 有 着 不 同 的 对 象 名 称 , 它们 的 工作 原理 却 几乎 一 样 , 因此 , 我 们 可 以 创建 一 个 变量 并 引用 它 。 


创建 一 个 简单 的 函数 ， 以 处 理 数 据 库 连接 : 























html5_indexedDB/javascripts/notes.js 
var connectToDB = function()})t{ 
Var version = 1; 
Var request = window.1indexedDB.open("awesomenotes", version),; 
request.onsuccess = function(event) { 
db = event .target.resuLt ; 
fetchNotes( ) ; 
}; 
request .onerror = function (event)t{ 
alert(event.debug[1] .message); 


上 
be 
这 里 通过 indexedDB 的 open( ) 方 法 来 创建 数据 库 连 接 。 在 连接 数据 库 时 , 我 们 指定 了 一 个 模 
式 版 本 号 ， 同 时 获取 作为 返回 值 的 请 求 对 象 。 该 请 求 对 象 拥有 一 个 success() 回 调 函 数 ， 当 数据 
库 连 接 建 立 之 后 就 会 调用 该 函数 ， 如 果 连 接 失 败 ， 则 调用 error() 回 调 也 数 。 


在 success() 回 调 函 数 里 ， 我 们 调用 了 fetchNotes () 方 法 ,在 后 面 会 创建 该 方法 。 这 个 方 
法 将 检索 数据 库 并 将 注意 事项 加 载 到 左边 栏 。 但 在 继续 操作 数据 库 之 前 ， 需 要 先 来 创建 
fetchNotes() 方 法 。 
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9.2.3 创建 注意 事项 表 
我 们 的 注意 事项 表 需 要 三 个 字段 : 








字 段 说 明 

id 注意 事项 的 唯一 识别 码 
titte 注意 事项 的 标题 ， 便 于 引用 
Note 注意 事项 的 具体 内 容 


要 创建 这 个 表 ， 我 们 在 connectToDB() 方 法 里 创建 的 请 求 对 象 上 添加 一 个 回调 消 数 
onupgradeneeded()。 该 回调 也 数 在 模式 版 本 改变 时 会 触发 。 在 这 个 例子 中 ，connectToDB() 
方法 指定 版 本 并 连接 到 一 个 目前 还 不 存在 的 数据 库 上 。 之 后 , 浏览 大 会 触发 onupgradeneeded ( ) 
回调 函数 ,因为 这 个 回调 函数 知道 我 们 此 时 需要 创建 一 个 表 。, 在 connectToDB() 中 添加 以 下 代码 : 





html5_indexedDB/javascripts/notes.js 


Var connectToDB = functiLon(t ){ 
Var version = 1; 
Var request = window.indexedDB.open("awesomenotes", version); 


request ,onupgradeneeded = function(event) { 
alert("uvunupgradeneeded fired"); 
var db = event.target.result; 
db.createObjectStore("notes", { keyPath: "id", autoIncrement: true }); 

}; 

request .onsuccess = function(event) { 
db = event.target. result; 
fetchNotes( ) ; 

}; 

request.onerror = function(event){ 
alert(event.debug[1] .message); 

} 

人 


create0bjectStore() 方 法 定义 我 们 要 用 到 的 数据 库 表 。 传 人 表 名 ,接着 传人 一 个 散 列 选项 
在 这 里 ， 我 们 声明 每 条 记录 都 有 一 个 唯一 、 目 增 且 名 为 id 的 键 。 

如 果 后 期 改变 了 版 本 号 ，onupgradeneeded() 会 再 次 触发 。 这 是 一 种 修改 用 户 机 右上 模式 
的 人 简便 方式 。 


现在 ， 我 们 有 了 数据 库 表 ， 可 以 让 应 用 做 些 什么 了 


Vvvyvyv 











9.2.4 ”加 载 注 意 事 项 


当 应 用 加 载 时 ,我 们 希望 连接 到 数据 库 ， 如 果 表 还 不 存在 就 创建 它 , 之 后 提取 数据 库 中 已 有 
的 注意 事项 记录 。connectToDB( ) 方 法 负责 连接 及 创建 数据 库 , 成 功 连接 之 后 调用 fetchNotes ( ) ， 
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我 们 马上 来 实现 该 方法 。 
fetchNotes() 方 法 提取 数据 库 中 所 有 的 注意 事项 记录 。 实 现代 码 如 下 所 示 : 











html5_indexedDB/javascripts/notes.js 


var fetchNotes = function(){ 
var keyRange, request, result, store, transaction, 


transaction = db,.transaction(["notes"], "readwrite"),; 
store = transaction.objectStore('"notes"); 


// 从 存储 器 中 获取 数据 ; 
keyRange = IDBKeyRange ,LOwerBound (0) ; 
request = store.openCursor(keyRange)}); 


request ,onsuccess = function(event) { 
resuLt = event.target,result; 
LIf(resuLt){ 
addToNotesList(resulLt.Kkey，resuLt.vVaLue) ; 
resuLt .continue( ) ; 


} 
}; 


request ,onerror = function(event) { 
alert("Unable to fetch records."); 
了 
3 
这 个 方法 通过 游标 从 数据 库 中 获取 结果 数据 ,如果 结果 数据 被 找到 ,就 调用 addNoteToList() 
方法 ， 在 左边 栏 上 添加 注意 事项 。 通 过 调用 result.continue()， 这 个 过 程 会 遍历 每 条 数据 库 
记录 ,该 方法 用 来 获取 下 一 条 记录 ， 并 再 次 调用 onsuccess() 回 调 函 数 。 这 不 是 循环 ， 而 是 一 个 
小 小 的 递归 事件 。 
我 们 需要 同时 获取 结果 的 key 及 data。key 是 我 们 定义 为 keypath 的 id 字段 ，data 则 是 一 个 
包含 了 注意 事项 标题 和 内 容 的 JavaScript 对 象 。 我 们 将 key 及 data 传 给 addNoteToList(), 以 将 注 
意 事项 添加 到 左边 栏 上 。addNoteToList() 代 码 如 下 所 示 : 














html5_indexedDB/javascripts/notes.js 


var addToNotesList = function(key, data)t 
Var item = $("<Li>"); 
Var notes = $("#notes"),; 


item.attr("data-id", key); 





中 键 值 可 以 以 记录 中 的 某 个 特定 字段 作为 键 值 ( 称 为 keypath )， 也 可 以 使 用 自动 生成 的 递增 数字 作为 键 值 ( 称 为 
keyGenerator )。 一 一 译 者 注 
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Item,htmtL(data.titLe) ， 
notes.append (item); 
) 
我 们 在 元 素 上 添加 一 个 目 定 义 数 据 属性 , 并 设置 属性 值 为 数据 库 记 录 的 力 字 上 段 值 。 当 用 户 点 
击 列表 项 时 ,我 们 通过 I 有 D 定 位 要 加 载 的 记录 。 之后, 往 页 面 的 无 序列 表 中 添加 创建 的 列表 项 ， 列 
表 项 元 素 市 有 注意 事项 数据 表 notes 的 ID 令 。 


我 们 通过 jQuery 的 attr() 方 法 设置 包含 数据 库 记 录 ID 什 的 自 定义 数据 属性 ,jQuery 的 data() 
方法 可 以 操作 自 定义 数据 属性 , ?但 data() 方 法 在 设置 和 获取 HTML5 data- 数 据 值 时 带 有 一 定 的 
副作用 。 通 过 data() 方 法 获取 的 HTML5 data- 数 据 值 将 被 自动 强制 设 为 某 种 数据 类 型 ， 因 此 ， 
使 用 data( ) 方 法 设置 数据 值 时 ， 要 将 数据 设置 为 jQuery 对 象 ， 而 不 是 元 素 的 自 定 义 数据 属性 。 考 
虑 到 简洁 性 和 一 臻 性， 我 们 在 这 里 将 避免 使 用 jQuery 的 data() 方 法 。 


现在 ,我们 需要 添加 在 表单 中 加 载 列表 项 的 代码 ， 当 用 户 从 列表 中 选择 一 条 注意 事项 时 ,将 
会 加 载 具 体内 容 。 


























9.2.5” 读 取 特 定 记 录 


我 们 可 以 给 每 个 列表 项 活 加 一 个 cLick 点 击 事件 , 但 更 加 实用 高 效 的 做 法 是 监控 无 序列 表 的 所 
有 点 击 事件 , 继而 判断 是 由 哪个 元 素 触 发 的 点 击 事件 。 这 样 一 来 ， 当 我 们 渗 加 新 的 列表 项 到 列表 中 
去 时 《比如 添加 了 新 的 注意 事项 )， 如 不 必 在 所 添加 的 每 个 列表 项 <Li> 元 系 上 添加 点 击 事件 了 。 


在 javascripts/notes.js 文 件 中 添加 事件 处 理 程序 : 








html5_indexedDB/javascripts/notes.js 
${"#notes").click(function(event)})t 
Var element = $(event.target); 
if (element.is('1i')) { 
getNote(element.attr("data-1id")),; 
} 
}); 


这 上段 代码 触发 qetNote() 方 法 ,获取 列表 项 里 的 D 值 并 据 此 从 数据 库 中 取出 对 应 的 某 条 记 
我 们 按 如 下 代码 定义 getNote () 方 法 : 


\ 
% 


html5_indexedDB/javascripts/notes.js 


var getNote = function(id)t 
Var reqyuest, store, transaction; 
1d = parseInt(id); 


transaction = db.transaction(["notes"]); 
store = transaction.objectStore("notes"); 


GD http://api.jquery.com/data/ 
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request = store.get(id), 


request.onsuccess = function(event) { 
showNote (request .result); 


}; 


request .onerror = function(error)t{ 
alert("Unable to fetch record " + 19) 
} 
这 个 方法 看 起 来 很 像 前 面 的 fetchNotes() 方 法 。 我 们 通过 调用 存储 兹 store 的 get() 方 法 ， 
并 传人 ID 值 ， 获 取 request 请 求 对 象 。 知 请 求 成 功 ， 就 通过 调用 showNote ( ) 方 法 在 表单 上 显示 
注意 事项 ， 具 体 代码 如 下 所 示 : 











html5_indexedDB/javascripts/notes.js 


var showNote = function(data)t 
Var note = $("#note").; 
Var title = $("#title"); 


title.val(data.title)}). 
title.attr("dgata-id", data.id).; 
note ,val (data.note): 


$("#delete button").show(); 
} 


这 个 方法 也 会 激活 删除 按钮 ， 同时 ,还 把 记录 了 D 赋 给 自 定义 数据 属性 ,这 样 就 能 很 方便 地 处 
理 更 新 操作 了 。 点 击 保存 按钮 时 ,将 检查 ID 是 否 已 存在 。 如 末 存 在 ,就 更 新 对 应 记录 ; 否则 ,就 
认为 是 新 记录 。 接 下 来 ,编写 具体 的 逻辑 人 处理 代 码 。 








9.2.6 创建、 更 新 以 及 删除 记录 


我 们 的 系统 需要 获取 并 显示 数据 库 表 中 的 注意 事项 记录 ， 但 首先 要 将 注意 事项 存储 到 系统 9 
中 。 我 们 先 来 实现 新 增 按钮 ， 点 击 该 按钮 将 清空 表单 ， 以 便 用 户 在 编辑 并 保存 一 条 已 有 注意 事项 
后 创建 一 条 新 记录 。 首 先 ， 创 建新 增 按钮 的 点 击 事件 处 理 代码 : 


























html5_indexedDB/javascripts/notes.js 


$("#new button").click(function(event)})t{ 
newNote( ) ; 


}); 


在 这 个 事件 处 理 程序 中 ， 我 们 清除 title 字 上段 的 data-id 目 定义 数据 属性 ， 并 从 表单 中 清除 
注音 事项 的 相关 内 容 。 同 时 ， 在 页 面 中 隐藏 删除 按钮 。 
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html5_indexedDB/javascripts/notes.js 
var newNote = functiLon( ){ 

Var note = $("#note"); 

Var title = $("#titie"). 


$("'#delete button").hidel(); 
title.removeAttr("data-1id"); 
title.val(""); 
note.val(""); 


+} 
当 用 户 点 击 保存 按钮 , 我 们 希望 代码 能 够 插入 新 记录 或 者 更 新 已 有 记录 。 在 这 里 使 用 之 前 的 
处 理 模 式 ， 来 实现 保存 按钮 的 事件 处 理 代码 : 





html5_indexedDB/javascripts/notes.js 


$("#save button").click(function(event)t{ 
var id, note, title, 


event .preventDefault(); 
note = $("#note"):; 

title = $("#title"), 

id = title.attr("gata-1id"),; 


if(id)t{ 
updateNote(id, title.val(), note.val()); 
}elsef 
insertNote(title.val(), note.val()); 
} 
I 





这 个 方法 检查 表单 标题 字段 的 data-id 目 定义 数据 属性 。 如 果 ID 不 存在 ,表单 就 认为 我 们 想 
要 插入 一 条 新 记录 ， 并 会 调用 我 们 接 下 来 定义 的 jnsertNote() 方 法 : 


html5_indexedDB/javascripts/notes.js 


var insertNote = function(title, note)t 
Var data, key 


data = 1{ 
"二 让 eI1tLe 
"note": note, 


人 


var transaction = db.transaction(["'notes"], "readwrite"),; 
var store = transaction.objectStore("notes"),; 
Var request = store.put(data); 
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request ,onsuccess = function(event) { 
key = request.result; 
addToNotesList(key, data); 
newNote ( ) ; 
站 
a 
insertNote() 方 法 添加 记录 到 数据 库 表 里 去 ， 并 通过 结果 result 的 key 属 性 获取 刚 创 建 记 
录 的 ID 值 。 前 面 将 ID 字段 设置 成 了 目 增 字段 ,因此 ， 当 我 们 创建 一 个 新 记录 时 ， 数 据 库 就 会 为 这 
个 新 记录 分 配 一 个 唯一 的 ID。 之 后 ， 调 用 addToNotesList() 方 法 来 添加 注意 事项 到 页 面 左 边栏 
的 无 序列 表 中 去 ， 在 这 里 ， 将 key 及 剩余 数据 传 给 addToNotesList() 方 法 。 同 时 ， 还 调用 了 
newNote () 方 法 ， 以 清除 表单 中 的 内 容 。 


接 下 来 ,需要 处 理 更 新 操作 。updateNote () 方 法 看 起 来 跟 我 们 目前 所 添加 的 其 他 方法 类 似 。 

















html5_indexedDB/javascripts/notes.js 


var UpdateNote = function(id, title, note)t 
Var data, request, store, transaction,; 
1d = parselnt(id), 
data = { 
"title"; title, 
"note": note, 
"1d" Td 
}; 
transaction = db.transaction(["notes"], "readwrite"), 


store = transaction.objectStore("notes"), 
request = store.put(data); 


request.onsuccess = function(event) { 
${("#notes>tildata-id=" + id + "Jj").html (title),; 
上 
1 
当 记 录 修 改 成 功 ， 就 通过 jQuery 在 左边 栏 里 找 出 data- id 属性 与 刚 修改 记录 ID 相 匹 配 的 <Li> 
元 素 〈 即 注意 事项 列表 中 的 注意 事项 )， 更 新 注意 事项 标题 。 


删除 记录 与 修改 操作 差不多 。 删 除 事件 的 实现 如 下 : 














html5_indexedDB/javascripts/notes.js 

$("#delete button").click(function(event)t 
Var title = $("#title"); 
event .preventDefautLt () ; 
deleteNote(title.attr("data-id")); 

by), 


接 下 来 调用 deleteNote() 方 法 ,该 方法 不 仅 从 数据 库 中 删除 记录 ， 同 时 还 从 左边 栏 的 注意 
事项 列表 中 删除 注意 事项 。 
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html5_indexedDB/javascripts/notes.js 


var deleteNote = function(id)t 
var request, store, transaction, 


jd = parseInt(id); 


transaction = db.transaction(["notes"], "readwrite"), 
store = transaction.objectStore("notes"), 
request = store,.delete(id),; 


request.onsuccess = function(event) { 
$("#notes>Llildata-id=" + id + "J]").removel(); 
newNote( ) ; 
1 
这 个 方法 也 调用 了 newNote() 方 法 ， 以 清除 表单 ， 这 样 我 们 就 能 创建 一 个 新 记录 ， 而 不 会 无 
意 中 复 制 了 一 条 刚刚 删除 的 记录 。 


最 后 ， 我 们 震 要 处 理 清除 所 有 记录 的 操作 。 给 全 部 删除 按钮 梁 加 一 个 点 击 事件 ， 代 码 如 下 所 未: 


or 











html5_indexedDB/javascripts/notes.js 

$("#delete all putton" ).cLick(functiIon(event){ 
clearNotes(); 

$7); 


该 方法 调用 了 clearNotes() 方 法 , 从 数据 库 中 删除 所 有 记录 。clearNotes() 方 法 的 代码 模 
式 和 前 面 的 代码 如 出 一 略 ， 如 下 所 示 : 


html5_indexedDB/javascripts/notes.js 


var clearNotes = function(id)t{ 
Var request, store, transaction,; 


transaction = db.transaction(["notes"], "readwrite"),; 

store = transaction.objectStore("notes"),; 

request = store.clear!(); 

request.onsuccess = function(event) { 
$("#notes").empiy!(); 

} 


request.onerror = function(event)t{ 
alert("Unable to clear things out."); 


} 
}; 


随 着 最 后 这 一 段 代 人 码 的 完成 ,我们 的 注意 事项 应 用 程序 也 就 完成 了 。 要 让 程序 运行 起 来 , 需 
要 调用 connectToDB() 方 法 并 从 数据 库 中 加 载 记录 。 还 需要 调用 newNote() 方 法 , 使 表单 随时 可 
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以 被 使 用 ， 这 时 ， 删 除 按钮 也 会 被 隐藏 。 


html5_indexedDB/javascripts/notes.js 
connectToDB(): 
newNote({):;: 


所 要 做 的 就 是 以 上 这 些 , 然而, 我 们 不 得 不 多 思考 一 下 这 个 应 用 。 由 于 数据 全 都 存 于 客户 端 ， 
就 像 cookie 一 样 ， 如 果 用 户 清 除 了 浏览 兹 缕 存 以 及 本 地 数据 ， 这 些 内 容 就 会 被 轻易 地 删除 。 与 此 
同时 ,这些 数据 也 不 能 在 不 同 电脑 间 共 至 。 要 解决 这 些 问 题 , 我们 需要 实现 一 种 途径 来 同步 数据 
到 服务 端 ， 不 过 ， 这 个 话题 已 超出 了 本 书 讨论 的 范围 。 

我 们 的 应 用 可 以 在 IE 10 以 及 晶 面 版 的 Chrome 、Firefox 浏 览 硕 中 运行 。 但 是 ，Safari 、Android 
浏览 需 以 及 iOS 上 的 Safari 并 不 文 持 IndexedDB 技 术 。 相 反 ,它们 文 持 废 弃 ( 但 广泛 使 用 ) 的 Web SQL 
Databases 规 范 。IE 8 和 IE 9 既 不 文 持 Web SQL Databases， 也 不 支持 IndexedDB。 接 下 来 看 这 些 场 
景 将 如 何 应 对 。 

















9.2.7” 回 退 方案 


最 简单 的 回 退 方案 应 该 就 是 说 服 此 类 应 用 的 用 户 将 浏览 名 升级 为 支持 IndexedDB 的 浏览 套 , 比 
如 IE 10, 或 者 ， 如 果 由 于 操作 系统 的 限制 无 法 升级 到 IE 10， 那 就 升级 到 最 新 版 本 的 Chrome。 这 种 
情况 并 非 没 有 先例 ,特别 是 使 用 一 个 替代 的 浏览 融 就 能 够 允许 你 利用 新 特性 创建 一 个 内 部 应 用 时 。 


当然 ， 作 为 开发 者 ， 我 们 不 能 总 是 提出 这 样 或 那样 的 要 求 。 但 我 们 可 以 通过 IndexedDBShim 
在 支持 Web SQL Databases 规 范 的 浏览 絮 中 运行 我 们 的 应 用 。" 这 就 意味 着 我 们 可 以 轻易 地 让 注意 
事项 应 用 程序 在 iPhone 、iPad 以 及 Android 平 板 等 移动 设备 上 运行 ,因为 这 些 设备 上 的 浏 览 套 都 文 
持 Web SQL Databases 规 范 。 要 使 用 IndexedDBShim， 可 以 下 载 其 压缩 版 本 并 在 页 面 <zhead> 标 签 
中 加 载 它 : 




















html5 indexedDB/index.html 


<sScript src="Jjavascripts/IndexedDBShim.min.]s"></script> 


在 这 个 例子 中 , 需要 在 页 面 的 <head> 标 签 中 加 载 IndexedDBShim, 否则 其 功能 可 能 在 当前 的 
Safari 中 无 法 得 到 支持 ， 这 将 会 导致 程序 无 法 运行 。 可 以 使 用 Modernizr 库 在 需要 IndexedDBShim 
库 的 时 候 再 加 载 它 ， 但 这 又 将 引发 一 个 问题 ， 就 是 不 管 什么 情况 下 都 加 载 另 一 个 库 〈Modernizr 
库 ), 目的 只 是 为 了 借助 它 的 检测 功能 来 加 载 IndexedDBShim， 这 是 否 有 意义 呢 ?” 如 果 你 打算 使 
用 Modernizr 库 来 做 其 他 事情 ， 那 么 根据 需要 用 它 来 加 载 各 种 库 才 会 真正 有 意义 。 


随 独 这 个 回 退 方案 的 添加 ， 当 我 们 在 Safari 或 其 他 文 择 Web SQL databases 规 范 的 浏 览 硕 中 加 
载 应 用 时 ， 应 用 将 正常 运行 。 这 个 回 退 方案 并 不 完美 ,因此 你 要 仔细 测试 它 ， 但 对 支持 Web SQL 


























GD http://nparashuram.com/IndexedDBShim/ 
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databases 的 浏览 大 而 言 ， 这 是 一 个 可 行 的 并 以 得 到 广泛 支持 的 回 退 方案 。 
遗憾 的 是 , 目前 尚 无 针对 IE 8 和 IE 9 的 IndexedDB 回 退 方案 。 这 些 浏览 句 的 用 户 将 无 法 体验 到 
IndexedDB 新 特性 齐 来 的 乐趣 。 


我 们 可 以 在 浏览 硕 端 存储 数据 ， 除 此 之 外 , 还 可 以 创建 离线 应 用 。 接 下 来 , 我 们 来 探讨 离线 
应 用 。 





出 色 却 又 停滞 的 Web SQL Databases 规 范 


Web SQL Databases 草 案 规范 定义 了 一 个 API， 供 开发 者 在 浏览 器 端 使 用 数据 库 ; 该 数据 
库 基 于 SQLite， 一 个 普遍 应 用 于 iOS 和 Android 平 台 的 流行 开源 数据 库 。Safari、iOS 平 台 的 
Safari、 Android 浏 览 器 以 及 Chrome 都 实现 了 这 个 API， 并 且 只 要 你 懂得 如 何 编 写 SQL 语 多， 
就 会 发 现 Web SQL Databases 编 程 非常 容易 上 手 。 然 而 ， 由 于 Web SQL Databases 规 范 只 聚焦 
于 单一 的 实现 ,标准 委员 会 决定 废弃 它 ， 除 非 有 人 提出 一 个 有 竞争 性 的 实现 。 于 是 ，Mozilla 
以 及 微软 决定 转 而 推进 IndexedDB ，Google 也 随 之 在 最 新 版 本 的 Chrome 中 添加 了 IndexedDB 
支持 。 如 果 你 想 了 解 Web SQL databases 的 工作 方式 ， 可 以 在 本 书 可 供 下 载 的 源 代码 的 
html5 websql 文 件 夹 中 ， 找 到 一 个 注意 事项 应 用 的 Web SQL databases 实 现 版 本 。 对 于 在 支持 
Web SQL databases 技 术 的 浏览 器 平台 上 开发 应 用 ，Web SQL databases 规 范 将 发 挥 重要 的 作 
用 ,尽管 该 规范 已 停滞 。 


9.3 实例 29: 离线 应 用 


随 着 HTML5 对 离线 Web 应 用 技术 的 支持 ,“ 我 们 就 可 以 借助 HTML 及 有 关 技 术 来 创建 无 需 连 接 
到 互联 网 也 能 够 运行 的 应 用 。 当 开发 可 能 在 断 开 网 络 的 情况 下 使 用 的 移动 应 用 时 ,这 样 做 尤其 有 效 。 

Firefox 、Chrome 、Safari 以 及 iOS、Android 2.0 以 上 设备 ， 都 支持 离线 应 用 技术 , 但 并 没有 一 
个 针对 IE 的 回 退 解决 方案 。 

AwesomeCo 公 司 已 经 为 它 的 销售 团队 购买 了 一 些 iPad, 并 希望 将 我 们 在 9.2 节 创建 的 注意 事项 
应 用 进一步 做 成 离线 应 用 。 依 助 HTMLS 应 用 程序 缓存 manifest 文 件 ， 这 项 任务 将 变 得 非常 简单 。 
接 下 来 讨论 manifest 清 单 文件 是 如 何 工 作 的 。 














9.3.1 通过 manifest 文 件 定 义 应 用 程序 缓存 


我 们 的 注意 事项 应 用 还 有 和 较 多 的 依赖 。 下 载 HTML 主 页 时 ， 浏览 器 就 得 下 载 一 些 CSS 及 
JavaScript 文 件 。 我 们 可 以 创建 一 个 manifest 文 件 ， 用 来 包含 一 些 Web 应 用 客户 端 文件 ( 如 HTML 








GD http:/www.w3.org/TR/html5/browsers.html#offline 
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页 面 、CSS 及 JavaScript 等 文件 ) 的 列表 ， 这些 文件 部 是 知 要 放置 在 客户 珊 浏 览 可 缓存 中 的 ,以便 
我 们 的 应 用 可 以 离线 使 用 。 用 户 第 一 次 访问 HTML 主 页 时 ，manifest 文 件 列表 中 标注 的 所 有 文件 
就 会 下 载 到 客户 涡 。 为 了 能 够 正常 运行 ， 应 用 逢 要 引用 的 每 个 文件 部 应 该 在 manifest 文 件 中 列 出 
来 。 唯 一 的 例外 就 是 包含 了 清单 列表 的 manifest 文 件 自身 不 用 列 出 ， 它 将 被 隐 式 缓存 。 


我 们 为 注意 事项 应 用 创建 一 个 manifest 文 件 ， 以 便 可 以 离线 运行 该 应 用 。 创 建 notes.appcache 
文件 ， 它 包含 的 内 容 如 下 : 

















html5_offline/notes.appcache 


CALHE MANIFEST 

#V= 1.0.0 
stylesheets/style.css 
Javascripts/notes.]s 
javascripts/IndexedDBShim.min.]js 
javascripts/jquery-1.9.1.min.is 


当 我 们 改变 代码 时 ， 需 要 同时 修改 更 新 manifest 文 件 ， 以 通知 浏览 疾 获 取 新 版 本 代码 。 这 时 
候 ， 人 借助 manifest 文 件 中 版 本 注释 内 容 的 更 新 (# v = 1.0.0 )， 来 相应 更 新 manifest 文 件 的 时 间 
惟 ， 以 便 实 际 更 新 manifest 文 件 列表 项 对 应 的 绥 存 文件 内 容 。 


同时 , 我 们 前 面 引 用 了 Google 主 机 上 的 jQuery 库 , 但 这 无 法 满足 应 用 的 离线 使 用 要 求 , 因此 ， 
我 们 需要 下 载 jQuery 库 ， 并 修改 页 面 中 <script> 标 签 的 引用 代码 ， 以 加 载 放 在 本 地 javascripts 目 
录 下 的 jQuery 库 。 

















html5 offline/index.html 


> <script src="javascripts/jquery-1.9.1.min.js"></script> 
<script src="javascripts/notes.i1s"></script> 


接 下 来 ， 通 过 改变 <htmtl> 标 签 链 接 manifest 文 件 到 HTML 文 档 : 


html5 _ offline/index.html 

<html manifest="notes.appcache"> 

这 就 是 我 们 要 做 的 全 部 工作 。 如 果 此 时 加 载 Chrome 控 制 台 ， 你 就 会 发 现 manifest 文 件 发 挥 作 
用 了 ， 如 图 9-3 所 示 : 





Elements Resources Network Sources Timeline Profiles Audits | Console | 























Creating Application Cache with manifest http://\localhost:8080808/html5_ offline/notes.appcache localhost:1 
Application Cache Checking event localhost:1 
Application Cache Downloading event localhost:1 
Application Cache Progress event (9 of 4) http://localhost:8000/html5_offline/javascripts/notes.js localhost:1 
Application Cache Progress event (1 of 4) http://localhost:8080/html5_offline/javascripts/jquery-1.9.1.min.1is localhost:1 
Application Cache Progress event (2 of 4) http://localhost:80800/html5_offline/style.css localhost:1 
Application Cache Progress event (3 of 4) http://localhost:8080/html5_ offline/javascripts/IndexedDBShim.min.1ijs localhost:1 
Application Cache Progress event (4 of 4) localhost:1 
Application Cache Cached event localhost:1 








图 9-3” Chrome 控制 台 输 出 的 缓存 文件 





172 第 9 章 户 端 数据 储存 


一 旦 所 有 文件 被 浏览 硕 绥 存 起 来 , 用户 就 可 以 断 开 网 络 并 离线 使 用 应 用 了 。 这 里 还 有 一 个 小 
问题 : manifest 文 件 需要 通过 一 个 web 应 用 服务 需 才 能 提供 给 用 户 使 用 ， 这 是 因为 manifest 文 件 必 
须 通 过 text/cache-manifest 的 MIME 类 型 来 提供 给 用 户 使 用 , 否则 浏览 硕 不 会 使 用 它 。 本 书 源 
代码 中 提供 了 一 个 基于 Node.js 的 服务 人 如, 可 以 用 来 测试 相关 程序 。 但 如 果 你 使 用 的 是 Apache 应 用 
服务 项 ， 可 以 在 一 个 .htaccess 文 件 中 按 如 下 代码 所 示 设 置 MIME 类 型 








html5 offline/.htaccess 


AddType text/cache-manifest .appcache 


当 我 们 第 一 次 请 求 注意 事项 应 用 时 , manifest 文 件 中 列 出 的 这 些 文件 就 会 被 下 载 并 绥 存 起 来 。 
随后 ， 我 们 就 可 以 断 开 网 络 ， 尽 情 离 线 使 用 该 应 用 了 。 


一 定 要 多 了 解 规范 ，manifest 文 件 还 有 许多 可 供 使 用 的 复杂 选项 。 比 如 ， 你 可 以 指定 某 个 文 
件 不 能 被 缓存 或 不 允许 被 离线 访问 ， 这 对 于 忽略 某 些 动态 文件 来 说 意义 重大 。 











9.3.2 manifest 文 件 与 服务 器 端 缓存 设置 


当 你 处 于 开发 模式 下 工作 时 , 也 许 会 考虑 在 Web 应 用 服务 器 设置 中 禁用 缓存 。 但 默认 情况 下 ， 
许多 Web 应 用 服务 硕 都 通过 设置 头 部 来 缓存 文件 ,以 通知 浏览 融 在 给 定时 间 内 不 要 获取 文件 的 新 
副本 。 当 你 添加 一 些 文件 到 manifest 文 件 中 去 时 ， 这 将 给 你 带 来 麻烦 。” 


如 果 使 用 Apache， 可 以 在 .htaccess 文 件 中 做 以 下 配置 来 禁用 缓存 : 











html5 offline/.htaccess 


ExpiresActive On 
ExpiresDefault "access" 


这 将 禁用 全 部 日 录 的 缓存 ， 因 此 ， 并 不 适合 生产 环境 。 但 它 可 以 确保 你 的 浏览 右 总 是 请 求 
manifest 文 件 的 最 新 版 本 。 

如 果 你 更 改 了 manifest 文 件 中 缓存 列表 项 对 应 的 文件 ， 就 要 同步 更 新 manifest 文 件 ， 可 以 通过 
修改 版 本 号 注释 的 内 容 来 完成 此 项 操作 。 

















9.3.3” 检 疯 网 络 连 遂 性 


我 们 开发 的 应 用 可 以 离线 工作 , 但 如 末 我 们 想 要 检测 一 个 活动 的 网 络 连接 并 同步 客户 并 数 据 
到 服务 端 去 会 怎样 ?我 们 也 可 以 实现 它 。 


首先 ， 通 过 navigator .onLine 属 性 ， 我 们 可 以 检测 当前 是 否 处 于 在 线 状 态 。 








中 因为 Web 应 用 服务 右 通 知 浏览 紫 不 要 获取 文件 的 新 副本 ， 所 以 浏览 絮 端 的 manifest 文 件 就 无 法 及 时 得 到 更 新 。 
一 一 译 者 注 
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html5 offline/offlinetest.html 


If (navigator.onLine) { 
alert('online') 

} else { 
alert{('offline'); 

} 


Safari 、Firefox 以 及 Chrome 文 持 navigator .onLine 属 性 ， 旦 这 种 方式 也 很 便捷 ， 但 上 述 代 
马 只 是 简单 地 检测 了 网 络 连通 性 。 这 样 一 来 ,我 们 就 可 以 擎 握 连 接 的 当前 状态 。 我 们 还 有 可 供 监 
以 处 理 网 络 断 开 连 接 的 情况 。 


html5 offline/offlinetest.html 


window.addEventListener{"offline", function(e)} { 
alert("offline"): 
}, false); 


window.addEventListener("online", function(e) { 
alert("online"); 
}, false); 
通过 这 种 方式 ， 我 们 可 以 检测 网 络 是 何 时 断 开 的 ,并 显示 一 条 信息 ; 当 网 络 再 次 可 用 时 ， 又 
可 以 同步 备份 数据 到 服务 端 。 


如 有 果 考 虑 在 我 们 的 注意 事项 应 用 中 实现 同步 数据 功能 , 将 涉及 一 些 服务 产后 台 代 码 , 这 大 大 
超出 了 本 书 犯 围 。 但 你 已 经 具备 了 进一步 深信 探究 的 基础 。 

















9.4 ”未 来 展望 


诸如 Web Storage 以 及 IndexedDB 这 样 的 新 特性 ， 为 开发 者 提供 了 强大 的 功能 及 灵活 性 ， 以 大 
助 他 们 创建 不 用 连接 到 服务 器 就 可 以 工作 的 Web 应 用 。 同 样 , 在 iPad 及 Android 设 备 上 运行 的 同类 
应 用 ， 在 结合 HIML5S 应 用 程序 缓存 manifest 文 件 之 后 ， 我 们 就 可 以 使 用 丈 悉 的 Web 技 术 来 取代 平 
台 专 有 技术 (如 Objective-C 和 Java for Android ), 以 创建 让 宣 的 离线 应 用 。 随 着 浏览 器 对 这 些 新 特 
性 的 广泛 支持 ,开发 者 将 会 更 好 地 利用 新 特性 来 创建 跨 平 台 运行 的 应 用 ,在 本 地 存储 数据 ， 并 在 
网 络 连 通 时 将 这 些 本 地 数据 同步 到 服务 端 。 























创建 交互 式 Web 应 用 








除了 新 标记 、 样 式 以 及 多 媒体 功能 外 ，HTML5 和 CSS3 还 提供 了 无 比 强 大 的 API， 用 来 创建 
更 丰富 、 强 大 的 Web 应 用 程序 。 我 们 业已 接触 了 在 客户 端 存储 数据 的 新 特性 ， 但 我 们 还 可 以 做 得 
更 好 。 本 章 开 头 将 介绍 HIMLS History API ( HTML5 历 史 API )， 接 下 来 通过 Cross-Document 
Messaging API ( 路 文档 消息 传递 API ) 实现 不 同 服 务 硕 上 页 面 之 间 的 通信 ， 之 后 讨论 WebSocket 
和 Geolocation (地理 定 位 ) 这 两 个 非常 强大 的 API， 它 们 可 用 来 开发 强 交 互 的 Web 应 用 。 最 后 将 
了 解 HTML5 的 Drag and Drop API ( 拖 放 API )。 


这 里 的 许多 API 刚 开始 是 以 HTML5S 规 范 的 一 部 分 发 展 起 来 的 , 但 最 终 都 分 拆 到 了 各 上 自 独立 的 
项 目 中 。 余 下 的 API 虽 然 从 未 成 为 HTMLS 规 范 的 一 部 分 ， 却 与 HIML5 有 着 千 丝 万 缕 的 关系 ， 甚 
至 有 时 候 开 发 者 们 都 很 难 分 清楚 两 者 的 界限 。 通 过 结合 上 述 这 些 新 特性 ,你 就 可 以 开发 出 体验 效 
条 更 佳 的 应 用 。 现 在 ， 我 们 多 来 看 看 History API。 


本 章 将 涉及 以 下 API 的 相关 内 容 。 


口 History: 管理 浏览 器 历史 记录 (CS3、F3、S4、IE8、O10.1、ioS3.2、A2 )。 

DC ross-Document Messaging: 在 路 域 的 内 容 窗口 或 <iframe> 间 传递 消息 (C5、F 4、 
SS、iOS4.1、A2)。 

口 WebS ocket : 在 浏览 需 与 服务 需 之 间 创 建 一 个 有 状态 链接 (CS、F6、S5、IE10、O 12.1、 
iOS 6 )。 

口 Geolocation: 从 客户 崭 浏 览 硕 获取 经 纬度 (CS、F3.53、S5S、0O 10.6、iOS3.2、A2.1 )。 

口 Drag and Drop: 提供 拖 放 交互 功能 (C4、F 3.5、S 3.1、IE 6: 部 分 支持 、IE 10: 完全 
支持 、O 12 )。 





























10.1 实例 30: 保存 历史 记录 


HTML5 规 范 引 入 了 管理 浏览 絮 历 史记 录 的 History API 。" 通 过 它 , 我们 可 以 添加 历史 到 浏览 
俘 历 史记 录 中 、 符 换 历 史记 录 , 甚至 还 可 以 存储 数据 。 当 我 们 重新 访问 页 面 时 , 还 可 以 取 回 它们 。 


GD http://www.w3.org/TR/html5/browsers.html#history 
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这 个 新 特性 对 于 单 页 面 应 用 而 言 非常 有 用 , 在 单 页 面 应 用 中 ,内容 是 动态 修改 的 , 但 同时 应 允许 
用 户 使 用 后 退 按钮 。 


在 5.2 方 ， 我 们 创建 了 一 个 AwesomeCo 公 司 新 主页 的 原型 ， 点 击 导 航标 签 柱 时 会 切换 主要 内 
容 区 域 的 内 容 。 这 种 方法 的 一 个 缺陷 就 是 不 支持 浏览 右 后 退 按 钮 。 如 果 我 们 点 击 一 个 标签 ， 按 下 
浏览 磊 后 退 按钮 能 回 到 我 们 访问 过 的 前 一 个 页 面 ， 却 回 不 到 先前 的 标签 页 。 我 们 将 通过 History 
API 来 解决 这 个 遗留 问题 。 





10.1.1 存储 当前 状态 


当 访 问 者 打开 一 个 新 的 Web 页 面 ， 浏 览 硕 会 将 此 页 面 添加 到 它 的 历史 记录 中 。 而 当 用 户 打开 
一 个 新 标签 页 , 我 们 就 需要 添加 新 标签 页 到 我 们 目 己 的 历史 记录 中 。 当 前 的 主页 原型 已 经 实现 了 
切换 标签 页 的 代码 。 我们 只 需 实 现 保存 用 户 所 选 标签 页 到 历史 记录 中 的 代码 即 可 。 创 建 一 个 新 方 
法 addTabToHistory() : 











html5_history/javascripts/application.js 


Line1 Var addTabToHistory = function(target)t 
2 var tab = target.attr("href"); 
3 var stateObject = {tab: tab}; 
4 window.history.pushState(stateObject, "", tab); 
5 } 


这 个 函数 接受 用 户 点 击 的 标签 页 。 我 们 通过 pushState () 方 法 和 href 属 性 值 , 添加 一 个 历史 
状态 给 浏览 入，pushState() 方 法 需要 三 个 参数 。 第 一 个 参数 ( stateObject ) 是 后 续 需 要 交互 的 
对 象 。 当 用 户 导 航 回 目标 历史 点 时 ,我 们 通过 这 个 对 象 来 存储 所 要 显示 标签 页 的 ID。 比 如 ， 当 用 
户 点 击 服 务 内 容 标 签 页 时 ， 我 们 就 存储 #services 到 stateObject 对 象 的 tab 属 性 中 。 


第 二 个 参数 是 用 于 鉴别 历史 状态 的 标题 。 它 跟 页 面 的 <tittLe> 元 素 是 两 码 事 ， 只 是 一 种 用 来 
鉴别 浏览 絮 历 史记 录 中 某 个 历史 的 方式 。 大 多 数 浏 览 絮 会 忽略 该 参数 ， 因 此 ， 我 们 在 这 里 设置 空 
字 串 。 

第 三 个 参数 是 一 个 将 显示 在 标题 栏 的 URL。 它 可 以 是 我 们 需要 设置 的 任意 内 容 。 在 这 里 ,我 
们 将 在 这 个 参数 中 再 次 使 用 标签 页 ID， 因 为 这 将 添加 一 个 散 列 到 URL 里 。 如 果 我 们 的 示例 页 面 
是 放 在 后 从 服务 右上 的 , 并 会 应 用 到 Ajax 技术 , 传人 像 /about 或 /services 这 样 的 相对 URL 就 更 
有 意义 了 。 在 这 种 方式 下 ， 当 用 户 进 入 这 个 URL 页 面 时 , 后 台 服 务 器 将 会 相应 地 做 出 响应 。 由 于 
没有 这 样 的 静态 页 面 ， 我 们 无 法 随意 设置 这 个 URL 来 让 它 正 常 工 作 。 

要 让 新 的 代码 生效 ， 我们 在 链接 点 击 事件 处 理 方法 中 添加 addTabToHistory() 方 法 调用 ， 
传人 用 户 点 击 的 标签 页 : 


















































A 
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html5_history/javascripts/application.js 
$("nav ul").click(function(event}t 
Var target = $(event.target),; 
if(target.is("a"))}t 
event .preventDefautLt (1) ; 
If ( $(target.attr("href"))}.attr("aria-hidden"))t{ 
> addTabToHistory(target) ; 
activateTab(target.attr("href")); 
1 
}; 
月 ， 
尽管 当前 代码 添加 了 一 个 历史 状态 ， 我 们 还 是 需要 编写 用 户 按 下 后 退 按钮 时 的 处 理 代码 。 





10.1.2 ”恢复 上 一 状态 
当 用 户 点 击 后 退 按钮 时 ， 就 会 触发 window.onpopstate() 事 件 。 我 们 通过 回调 函数 来 显示 
存储 在 状态 对 象 ( 即 前 面 的 stateObject 对 象 ) 中 的 标签 页 。 





html5_history/javascripts/application.js 
var configurePopState = function()t{ 
window,onpopstate = function(event) { 


LILf(event ,State){ 
Var tab = (event ,State[ "tapbp"] ) ; 


activateTab(tab) ， 
} 
由 
我 们 要 做 的 就 是 从 状态 对 象 中 获取 先前 存 人 历史 记录 里 的 标签 页 ， 并 传人 activateTab ( ) 
国 数 中 。 代 码 重用 真 不 错 ! 











10.1.3 ”设置 默认 状态 

我 们 有 一 堆 的 问题 焉 行 解决 。 当 我 们 第 一 次 进入 页 面 时 ， 历 史 状 态 是 空 的 , 因此， 需要 目 己 
动手 来 设置 它 。 同 时 ,， 无论 何 时 点 击 一 个 标签 页 ，URL 都 会 发 生 改变 , 但 如 果 我 们 重新 加 载 页 面 
(刷新 )， 束 会 显示 欢迎 内 容 标签 页 ， 而 不 是 我 们 想 要 的 标签 页 内 容 。 因 此 ,在 页 面 加 载 时 需要 检 
碍 URL， 看 看 生 那 个 标签 页 要 筱 打开 ， 并 变 置 它 。 








html5_history/javascripts/application.js 

var activateDefauLtTab = function(){ 
tab = window. location.hash || "#welicome"; 
activateTab(tab); 
window.history.replaceState( {tab: tab}, "", tab), 


je 
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如 果 Location.hash 为 空 值 ， 我 们 就 设置 其 默认 值 ( #Wwelcome )。 之 后 ， 使 用 history. 
repLaceState() 来 设置 标签 页 。 这 个 过 程 有 点 像 pushState() ， 只 不 过 它 会 蔡 换 当 前 历史 而 非 
添加 新 的 历史 。 

现在 ,为 了 良好 地 组 织 人 代码， 我 们 创建 init() 也 数 来 调用 这 些 新 方法 以 及 早 前 的 
configureTabSelection() 方 法 。 





html5_history/javascripts/application.js 
> var init = function( ){ 
configureTabSelection(); 
> configurePopState(); 
> activateDefaultTab(); 
> 


之 后 ， 我 们 需要 调用 init () 让 程序 运行 起 来 。 





html5_history/javascripts/application.js 

jnit(); 

打开 页 面 时 , 我 们 就 可 以 壳 历 所 有 的 标签 页 ,同时 你 会 发 现 通 过 后 退 按 钮 可 以 轻松 返回 到 上 
次 访问 的 标签 页 内 容 ， 而 这 一 切 都 要 归功 于 History API。 








10.1.4 回 退 方案 


前 面 的 代码 可 以 在 Chrome、Firefox、Safari、IE 9 及 更 高 版 本 浏览 问 中 正常 运行 。 对 于 老式 
浏览 磊 来 说 ， 最 好 的 回 退 方案 就 是 使 用 History.js,，“ 它 将 创建 一 个 跨 平 台 方 案 来 让 历史 记录 功能 
运转 起 来 。 然 而 ， 这 并 不 是 一 个 简单 直接 的 符 代 方案 。 要 使 用 Historyjs， 首 先 需 要 加 载 该 库 ， 之 
后 修改 你 的 代码 并 用 它 来 替代 浏览 兹 的 history (历史 记录 ) 对 象 。 好 在 History.js 紧 密 跟 进 规范 ， 
免 去 了 你 检测 浏览 需 对 历史 记录 文 持 程度 的 需要 。 由 于 History.js 的 使 用 需要 修改 原来 的 代码 , 我 
们 就 不 在 这 里 实现 该 方式 了 ， 把 它 留 给 你 来 完成 吧 ! 

首先 ， 我 们 仍 需要 防止 老式 浏览 硕 出 现 错误 ， 因 此 ， 使 用 Modernizr 库 来 检测 历史 记录 特性 
的 文 持 情况 。 在 HIML 页 面 中 添加 Modernizr 库 。 


html5_history/fallback/index.html 10 


<script src=" javascrIiptsV/hnooernIzr. Js"></ScrIpt> 








之 后 通过 Modernizr.history 封 装 对 window.history 对 象 的 调用 。 


GD https://github.com/browserstate/history.js/ 
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html5_history/fallback/javascripts/application.js 


$("nav ul").click(function(event}t 
var target = $(event.target)., 
if(target ,is("a")){ 
event .preventDefault(); 
if ( $(target.attr("href")).attr("aria-hidden"))t{ 
if (Modernizr.history)t 
addTabToHistory (target); 
> } 
activateTab(target.attr("href")); 
下 
1 
下 
var init = function(){ 
configureTabSelection(); 
> if (Modernizr.history)t 
configurePopState(); 
activateDefaultTab(); 
> 
}; 


如 果 你 打算 使 用 Historyjs， 就 可 以 基于 是 否 需要 回 退 方案 ， 通 过 Modernizr.Load() 来 加 载 
不 同 版 本 的 代码 。 


下 面 来 讨论 如 何在 不 同 域 的 两 个 站 点 之 间 交 换 信 息 。 





10.2 ”实例 31: 跨 域 通信 


客户 问 Web 应 用 有 个 传统 的 限制 ,就 是 无 法 与 其 他 域 的 脚本 进行 通信 ， 这 人 么 做 的 初衷 是 为 了 
保护 用 户 的 安全 , 这 就 是 著名 的 同 源 策略 '*( Same-origin Policy, 一 个 著名 的 安全 策略 , 由 Netscape 
提出 ) 这 种 安全 策略 在 给 用 户 市 来 保护 的 同时 ， 也 市 来 了 诸多 不 便 ， 特 别 是 在 具备 合法 理由 需 
要 在 两 个 隔离 的 站 点 之 间 通 信 的 情况 下 。 有 许多 巧妙 的 方式 来 突破 这 种 限制 , 包括 使 用 服务 硕 端 
代理 以 及 应 用 一 些 URL 技 巧 ， 等 等 。 不 过 ， 现 在 我 们 有 了 一 种 更 好 的 方式 ! 


Cross-Document Messaging 技 术 ， 或 者 称 之 为 Web Messaging ( Web 消 息 传 递 ) >， 是 一 个 实现 
路 域 脚本 间 来 回 传递 消息 的 API。 例 如 ， 我 们 在 http:/supportawesomecompany.com 网 站 上 有 一 个 
表单 ， 传 送 内 容 给 另 一 个 浏览 硕 窗 口 或 <iframe> ， 而 这 些 浏览 需 窗 口 或 <iframe> 又 位 于 
http://www.awesomecompany.com 上。 当前 的 示例 正 是 这 样 的 情况 。 


AwesomeCo 公 司 新 的 文 持 网 站 将 提供 一 个 联系 表单 , 态 外 , 客户 文 持 经 理 还 硕 望 在 汉 欣 看 联 
系 表单 的 地 方 ， 列 出 所 有 的 技术 文 持 联系 人 及 他 们 的 电子 邮件 地 址 ， 如 图 10-1 所 示 。 


























GD https://developer.mozilla.org/en/Same origin policy for JavaScript. 
@) http:/www.w3.org/TR/webmessaging/#web-messaging 
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技术 支持 联系 人 信息 最 终 来 自 于 位 于 为 一 个 服务 融 上 的 内 容 管 理 系 统 , 因 此 ,对 于 这 个 示例 ， 
我 们 将 在 联系 表单 旁边 使 用 <iframe> 元 系 腻 入 技术 文 持 联系 人 列表 。 如 果 用 户 点 击 联系 人 列表 
中 的 联系 人 时 , 应 用 能 日 动 将 其 电子 邮箱 地 址 添加 到 表单 左边 的 发 送 地 址 栏 , 那么 客户 支持 经 理 


一 定 会 非常 豆 欢 这 个 创意 ! 








To 


Sales 


James Norris 
From j.norris@awesomeco.com 


Message Operations 
Tony Raymond 
traymond@awesomeco.com 





Accounts Payable 
Clark Greenwood 
c.2reenwood@awesomeco.com 


Accounts Receivable 
Herbert Whitmore 
h.whitmore@awesomeco.com 





图 10-1 ”开发 完成 后 的 支持 网 站 


我 们 可 以 轻松 实现 这 个 功能 ,但 你 需要 两 个 Web 服 务 需 来 正确 测试 目 己 的 程序 。 这 里 的 示例 
需要 部 署 在 Web 服 务 帮 上 才能 正常 运行 。 最 基本 的 条 件 是 ， 你 需要 将 联系 人 列表 应 用 (前面 提 到 
所 请 的 内 容 管 理 系统 ) 放 在 某 个 端口 , 支持 网 站 部 署 在 另 一 个 端口 , 这 样 才 能 验证 cross-document 
messaging 技 术 是 否 可 行 。 本 书 的 源 代 码 文件 中 提供 了 一 个 简单 的 脚本 ， 你 可 以 用 来 为 这 个 示例 
程序 局 动 一 个 Web 服 务 般 。 这 需要 Node.js 技 术 的 文 持 ， 你 可 以 通过 回顾 前 言 中 关于 Nodejs 和 示例 
服务 需 的 说 明 ,， 来 获得 如 何 设 置 及 启动 服 务 需 的 详细 信息 。 在 这 里 ， 示 例 代 码 将 使 用 的 Web 服 务 
售 URL 及 端口 如 下 : 

口 联系 人 列表 应 用 : localhost:4000; 

口 支持 网 站 : localhost:3000。 


如 采 你 想 把 文件 放 在 目 己 的 服务 各 上 ， 只 需 相 应 地 答 换 代码 中 的 URL 即 可 。 











10.2.1 联系 人 列表 


先 来 创建 联系 人 列表 。 这 个 文件 将 被 朋 入 到 支持 网 站 的 <iframe> 标 签 中 ， 并 会 发 送 消息 给 
文 持 网 站 。 基 本 的 HTML 代 人 码 如 下 : 


html5_cross_document/contactlist/index.html 
<IDOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta charset="utf-8"> 
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<title>Contact List</tittle> 
<link rel="stylesheet" href="stylesheets/style.css" > 


</head> 
<body> 
<ul id="contacts"> 
<LIL> 
<h2>Sales</h2> 


<p class="name">James Norris</p> 


<hR clacc="'email'si nNnorrisAawecsamecoa come /n> 
| sd MW Mm Ml ed WA be J [| A Il Fa | i 
</\i> 
<li> 
<h2>0perations</h2> 


<p class="name">Tony Raymond</p> 
<p class="email">t.raymond@awesomeco.com</p> 
</11i> 
<li> 
<h2>Accounts Payable</h2> 
<p class="name">Clark Greenwood</p> 
<p class="email">cC.greenwood@awesomeco.com</p> 
</1i> 
<1i> 
<h2>Accounts Receivable</h2> 
<p class="name">Herbert Whitmore</p> 
<p class="email">h .whitmore@awesomeco.com</p> 
</1i> 
</ul> 
</body> 
</html> 


在 这 个 页 面 里 ,我 们 将 同时 将 加 载 j Query 库 和 我 们 目 己 的 application.js 目 定义 文件 ， 并 置 于 
</body> 闭 标签 之 前 。 


html5_cross_ document/contactlist/index.html 

<script 
src="http://alax.googleapis. com/alax/ libs/Tquery/1.9.1/7query.min.1s"> 

</script> 


<script src="javascripts/application,.is"></script> 


联系 人 列表 的 样式 代码 如 下 所 示 : 





html5_cross_ document/contactlist/stylesheets/style.css 
ulf{ 
list-style: none ; 
} 
ul h2, ul p{margin: ©O;} 


ul > Li{fmargin-bottom: 20px;} 
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这 段 代 人 码 只 是 对 样式 做 了 微调 ， 以 让 列表 看 起 来 更 人 简洁 一 些 。 


10.2.2 发送 消息 

当 用 户 点 击 联系 人 列表 中 的 一 个 列表 项 ( 联系 人 )， 我 们 将 获取 列表 项 的 电子 邮件 地 址 ， 并 
回 传 一 个 消息 给 父 窗口 。postMessage () 方 法 需要 传人 两 个 参数 : 消息 本 号 以 及 目标 窗口 源 。 记 
住 , 联系 人 列表 由 http://localhost:4000 提 供 服 务 , 但 是 会 被 包含 在 男 一 个 页 面 的 <iframe> 标 签 中 ， 
而 该 页 面 是 由 http://localhost:3000 提 供 服 务 的 。 因 此 ， 我 们 要 回 传 消息 的 日 标 窗口 源 URL 是 
http://localhost:3000。 


列表 项 点 击 事件 处 理 函 数 的 代码 如 下 : 








html5_cross_ document/contactlist/javascripts/application.js 
${("#contacts 1li"}).click(function(event)t 
Var email, origin; 
email = $(this}).find{".email") .html(); 
origin = "http://localhost:3000/index.html"; 
iT(window.postMessage)t 
window.parent.postMessage (email, origin); 
} 
Py 


如 果 你 使 用 自己 的 服务 需 , 就 需要 修改 目标 窗口 源 , 因为 出 于 安全 原因 , 需要 匹配 父 窗口 URL。 
现在 ， 我 们 需要 来 实现 角 信 <iframe> 元 素 并 接收 其 传 回 消 息 的 页 面 。 





10.2.3 ”支持 网 站 


支持 网 站 的 结构 看 起 来 跟 联系 人 列表 页 面 的 结构 非常 类 似 , 但 为 了 保持 内 容 独 立 , 特别 是 考 
感到 这 个 网 站 需要 部 署 在 不 同 的 Web 服 务 硕 上 ， 我 们 将 在 不 同 的 文件 夹 中 存放 它 。 确 保 你 加 载 了 
样式 表 、jQuery 库 以 及 新 实现 的 application.js。 我 们 的 支持 网 站 页 面 需 要 有 一 个 联系 表单 以 及 一 个 
引 向 联系 人 列表 的 <iframe> 元 素 ， 代 码 如 下 所 示 : 

















html5_cross_ document/supportpage/index.html 
<div id="form"> 
<form id="supportform"> 
<fieldset> 
<OL> 
<li> 
<label for="to'">To</label> 
<input type="email" name="to" id="to"> 
</1i> 
<LIL> 
<label for="from">From</label> 





<input type="text" name="from" id=" From"> 
</1i> 
<11i> 
<label for="message">Message</label> 
<textarea name="message" id="message"></textarea> 
</11i> 
</ol> 
<input type="submit" value="Send!"> 
</fieldset> 
</form> 
</div> 
<div id="contacts"> 
<iframe src="http://localhost;:4000/index.html"></iframe> 
</div> 


我 们 在 stylesheets/style.css 文 件 里 设置 上 述 HTML 代 码 的 样式 。 





html5_cross_ document/supportpage/stylesheets/style.css 


#formt{ 
width: 400px; 
flLoat Veft: 
} 
#contactst{ 


width: 200px; 
float: Left ， 


Me NA 


} 


#contacts iframef 
border: none,; 
height: 400px; 


} 

fleLdseti{ 
width: 400px; 
border: none; 

} 


fieldset legendt{ 
background-color: #ddd ， 


fieldset>ol{ 
list-style: none; 
padding: 09; 
margin: 2px; 


} 
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fieldset>ol>1if 
margin: © 0 9px 0; 
padding: 0; 

} 


/* 让 输入 字段 逐 行 排列 */ 

fieldset input, fieldset textareat 
display:block; 
width: 380px ; 


+ Tmmi 二 了 于 
= Ce et 


: 390px; 


~ 

3 
C 
| 


fieldset textareaif 
height: 100pxX ; 
J 


这 个 样式 将 联系 表单 跟 <iframe> 元 素 水 平 排放 在 一 起 ， 并 对 表单 字段 添加 了 基本 样式 。 
10.2.4 ”接收 消息 


每 当当 前 窗口 收 到 一 条 消息 时 ，onmessage() 事 件 郡 会 被 触发 。 这 个 消息 作为 该 事件 的 一 个 
属性 被 返回 。 我 们 用 jQuery 的 on () 方 法 来 注册 该 事件 ， 以 便 它 能 够 在 所 有 浏览 融 中 正 篆 工作。 








html5_cross_ document/supportpage/javascripts/application.js 


$(window) .on("message" function(event ){ 
${("#to").val(event.originalEvent. data); 
}); 


jQuery 的 on() 方 法 封 滨 事 件 ， 并 且 不 会 又 露 事件 的 每 个 属性 。 我 们 可 以 换 用 事件 的 
originalEvent 属 性 来 访问 所 需要 的 属性 。 

如 果 你 在 Firefox、Chrome 、Safari 或 IE 8 及 更 高 版 本 中 打开 这 个 支持 网 站 ， 会 发 现 它 运行 得 
非常 好 。 对 于 这 些 浏 览 硕 来 说 并 不 需要 一 个 回 退 方案 。 一 定 要 在 服务 需 上 运行 示例 代码 脚本 ， 并 
通过 访问 http:/localhost:3000 来 发 现 运行 中 的 问题 。 

如 上 所 示 , 在 两 个 独立 的 页 面 或 应 用 中 通信 的 能 力 ,为 创建 更 具 模 块 化 的 应 用 葛 定 了 坚实 基础 。 

















10.2.5 IE 8 及 IE 9 中 的 限制 


虽然 IE 8 和 JE 9 都 文 持 Cross-Document Messaging， 但 在 IE 8 和 IE 9 中 ，postMessage() 困 数 
只 能 处 理 字 符 串 , 而 无 法 处 理 对 象 。 此外, 消息 也 只 能 在 <frame> 元 素 和 <iframe> 元 素 之 间 传 递 。 
这 时 ，jQuery PostMessage 搬 件 就 可 以 派 上 用 场 了 ， 因 为 它 允 许 对 象 序列 化 。?” 





GD http://benalman.com/projects/jquery-postmessage-plugin/ 
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现在 , 我 们 已 经 营 握 了 在 两 个 站 点 之 间 传 递 消息 的 方法 了 。 下 面 我 们 来 了 解 如 何 实现 服务 从 
与 用 户 间 的 双向 通信 。 








10.3 ”实例 32: WebSocket 聊天 


多 年 以 来 ，Web 开 发 者 一 下 致力 于 实现 服务 需 与 用 户 间 的 实时 交互 ， 但 其 中 的 大 多 数 实现 都 
是 通过 调用 JavaScript 代 码 来 触发 远程 服务 妖 检 查 改变 。HTTP 属 无 状态 协议 ， 因 此 ，Web 浏 览 巴 
会 连 接 到 服务 磊 ， 获取 啊 应 ,然后 断 开 连接 。 在 无 状态 协议 上 处理 实时 任务 是 一 件 非常 痛 匣 的 事 
情 。HTML5 规 范 引 入 了 WebSocket 技 术 ， 可 以 帮助 浏览 姨 创 建 一 个 到 远程 服务 右 的 有 状态 连接 。™ 
我 们 可 以 使 用 WebSocket 来 创建 各 式 各 样 的 优秀 应 用 。 了 人 解 它 们 是 如 何 工 作 的 一 个 最 佳 方式 就 是 
编写 一 个 聊天 客户 问 ， 无 独 有 偶 ，AwesomeCo 公 司 网 站 正 需 要 这 样 一 个 功能 。 


AwesomeCo 公 司 打 算 在 其 支持 网 站 上 创建 一 个 简单 的 、 基 于 Web 的 聊天 界面 , 供 分 散在 各 地 
的 客户 支持 人 员 进 行内 部 通信 时 使 用 。 如 图 10-2 所 示 。 





























AwesomeCo Help! 


Nickname GuestUser | Change | 


CoNnecting.... 
Connected to the server 


Messape | Send | 


图 10-2 ”聊天 界面 


我 们 使 用 WebSocket 技 术 来 为 聊天 服务 俘 实 现 这 个 Web 界 面 。 用 户 可 以 连接 并 发 送 消息 给 服 
务 天 。 每 个 连接 用 户 都 可 以 看 到 这 条 消息 。 用 户 还 可 以 模仿 IRC 聊 天 协议 , 通过 诸如 “mick brian” 
这 样 的 格式 为 目 己 分 配 一 个 上 昵称。 我 们 不 会 在 这 里 编写 实际 的 服务 端 代码 ,因为 已 经 有 开发 者 蔡 
我 们 写 好 了 。 这 个 服务 端 代码 在 Web 服 务 保 上 运行 一 个 聊天 服务 端 ， 我 们 可 以 用 它 来 测试 示例 。 




















10.3.1 聊天 再 面 
我 们 要 创建 的 是 一 个 非常 简单 的 聊天 界面 ( 如 图 9-5 所 示 )， 上 面 有 一 个 表单 可 以 改变 用 户 昵 


GD WebSocket 已 被 拆 分 成 独立 的 规范 ， 详 情 请 参考 : http://www.w3.org/TR/websockets/。 
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称 ; 接 下 来 是 一 个 很 大 的 消息 显示 区 域 (一 个 <div> 元 素 )， 用 来 显示 聊天 内 容 ; 最 后 还 有 一 个 
表单 ， 通 过 发 送 按钮 将 消息 发 送 到 聊天 服务 病 。 

在 这 个 新 的 HIML5 页 面 中 ， 我 们 将 为 这 个 聊天 界面 添加 标记 ， 包 含 两 个 表单 和 一 个 用 来 包 
含 聊天 消息 的 <div> 元 系 。 





html5 websockets/index.html 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>My Chat Server</title> 
<link rel="stylesheet" href="stylesheets/style.css"> 
</head> 
<body> 
<div id="chat wrapper"> 
<h2>AwesomeCo Help!</h2> 
<form jd="nick form" action="#" method="post"> 


<p> 
<LabeL>Nickname 
<input id="nickname" type="text" value="GuestUser"/> 
</LabelL> 
<input type="submit" value="Change'"> 
</p> 
</form> 
<div id="chat">connecting....</div> 
<form id="chat_form" action="#" method="post"> 
<p> 
<label>Message 
<input id="message" type="text" /> 
</LabeL> 
<input type="submit" value="Send'"> 
</p> 
</form> 
</div> 
</body> 


</html> 
同时 ， 还 需要 加 和 载 jQuery 库 ， 并 加 载 与 WebSocket 服 务 磊 通信 的 客户 病 JavaScript 代 码 文 件 。 
在 </body> 闭 标签 之 上 添加 它们 。 





html5 websockets/index.html 


<script 
src="http://ajax.,googleapis,com/aljax/ Libs/iTquery/1.9.1/Tquery.min.]s"> 


</script> 
<script src='javascripts/chat.i;s'></script> 


我 们 的 stylesheets/style.css 样 式 表 文 件 代 码 如 下 所 示 。 
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html5_websockets/stylesheets/style.css 
Line1 #chat wrappert 
background-color: #ddd; 
height: 440px; 
padding: 1l0px; 
5 width: 320px; 
-J 


- #chat wrapper h2{ margin: 0; } 


10 #chatt{ 
- background-color: #fff; 
helght: 300px; 
overflow: auto; 
- padding: 10px; 
15 width: 300px; 
eh 


在 第 13 行 ， 我 们 给 消息 显示 区 域 设置 了 overflow 属 性 ， 这 样 ， 在 其 高 度 固 定 的 情况 下 ， 过 
长 的 消 有 息 文 本 会 被 隐藏 ， 但 可 以 通过 深 动 条 的 深 动 操作 来 查看 完整 消息 内 容 。 

随 厦 聊天 界面 的 完成 ,我 们 承 可 以 来 实现 聊天 界面 与 聊天 服务 带 间 通信 的 JavaScript 代 码 部 
le 


























10.3.2 与 聊天 服务 器 的 通信 


不 管 使 用 什么 样 的 WebSocket 服 务 需 ， 我 们 都 将 反复 使 用 同一 个 模式 。 创 建 一 个 到 服务 需 的 
连接 ， 然 后 监听 服务 端 事件 ， 并 做 出 相应 的 啊 应 。 








事件 描 述 
onopen() 当 与 服务 器 的 连接 建立 时 触发 
onmessage() 当 与 服务 器 的 连接 发 送 一 条 消息 时 触发 
onclose() 当 与 服务 器 的 连接 丢失 或 关闭 时 触发 





在 javascripts/chat.js 文 件 中 ， 我 们 首先 需要 连接 到 WebSocket 服 务 硕 ， 如 以 下 代码 所 示 : 


html5_websockets/javascripts/chat.js 


var SetupChat = function()t 
// 记得 将 IP 地 址 更 改 为 WebSocket 服 务 器 的 实际 IP 地 址 
Var webSocket = new WebSocket('ws://192.168.1.2:9394/°' ); 


1 

我 们 在 setupChat ( ) 哨 数 中 放置 所 有 的 事件 人 处理 代码 。 这 将 保证 更 好 的 条 理性 ， 并 让 我 们 控 
制 在 何 种 情况 下 才 会 触发 这 些 事 件 ， 避 人 免 事件 代码 直接 运行 。 由 于 最 后 需要 检测 浏览 硕 的 
WebSocket 文 持 情 况 并 在 必要 时 加 载 回 退 方案 ， 因 此 ， 我 们 乔 望 事件 在 我 们 准备 就 绪 时 才 触 发 。 
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连接 到 服务 需 时 ， 我 们 需要 通知 用 户 连 接 已 创建 。 因 此 ,在 setupChat () 函数 中 定义 一 个 
onopen( ) 方 法 : 


html5_websockets/javascripts/chat.js 
webSocket.onopen = function(event)t{ 
$('#chat').append('<br>Connected to the server'), 
和 
当 浏 览 硕 打 开 到 服务 硕 的 连接 ,我 们 就 在 聊天 窗口 里 发 布 一 条 通 知 消息 。 接 下 来 ,还 需要 显 
示 发 送 给 聊天 服务 器 的 聊天 消息 。 我 们 同样 在 setupChat ( ) 函数 里 定义 一 个 onmessage() 方 法 来 
做 这 件 事情 ， 代 人 码 如 下 所 示 : 


htmlSs_ websockets/javascripts/chat.js 
Line1 webSocket.onmessage = function(event)t{ 
2 $('#chat').append("<br>" + event.data); 
3 $('#chat').animate({scrollTop: $('#chat').height()}),; 
4 
服务 端 消息 通过 event 对 象 的 data 属 性 返回 给 我 们 。 只 需 将 此 消息 添加 到 聊天 窗口 。 我 们 要 
预先 思考 一 下 每 条 响应 消息 的 合适 位 置 ， 但 你 完全 可 以 按 你 自己 的 方式 来 考虑 如 何 放置 及 呈现 。 
在 这 里 采取 的 方式 是 : 使 用 jQuery 来 滚动 聊天 窗口 ， 以 便 在 底部 显示 新 消息 ， 如 第 3 行 代码 所 示 。 


接 下 来 ， 处 理 连 接 断 开 时 的 情况 。 连 接 断 开 时 即 会 触发 oncLose() 方 法 。 

















html5_websockets/javascripts/chat.js 
webSocket ,oncLose = function(event)})t 
$("#chat").append('<br>Connection cilosed'),; 
他 
现在 ,我 们 只 需要 处 理 聊天 表单 中 的 多 行文 本 字段 即 可 ， 以 发 送 消 息 给 聊天 服务 硕 。 这 个 事 
件 处 理 方 法 同样 放置 在 setupChat ( ) 函数 里 : 





html5_websockets/javascripts/chat.js 


$( formt#chat_ form'").submit(function(e){ 
e.preventDefault(),; 


Var textfield = $("#message"); 40 
webSocket.send(textfield.val()):; 
textfield.val(""); 

}); 


我 们 处 理 表单 的 提交 事件 ， 获 取 表 单 中 多 行文 本 字段 的 消息 内 容 ， 并 通过 send () 方 法 发 送 
消息 给 聊天 服务 大。 


以 同样 的 方式 实现 昵称 更 改 功 能 ， 只 不 过 是 给 发 送 的 消息 添加 “mick. ”前 缀 。 聊 天 服务 休 
将 接收 消息 并 更 改 用 户 和 。 
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html5_websockets/javascripts/chat.js 
${"form#nick form").submit(function(e)t{ 
e,.preventDefault(); 
Var textfield = $("#nickname"),; 
webSocket.send("/nick " + textfield.val()); 
}); 


最 后 ， 调 用 setupChat ( ) 函数 ， 使 所 有 的 事件 得 以 触发 执行 。 





html5_websockets/javascripts/chat.js 

setupChat( ) ; 

在 更 为 复杂 的 应 用 中 , 更 好 的 做 法 是 将 setupChat () 方 法 里 的 内 容 拆 分 成 独立 的 方法 , 这样 ， 
每 个 方法 都 各 司 其 职 。 但 在 这 里 通过 我 们 的 方式 能 够 运行 起 来 ,并 用 来 验证 所 讨论 的 内 容 ， 这 就 
足够 了 。 

以 上 就 是 本 样 例 的 所 有 内 容 。Safari 、Firefox 以 及 Chrome 用 户 可 以 立即 使 用 浏览 需 参 与 体验 
实时 聊天 。 当 然 ， 我 们 还 要 考虑 到 不 支持 原生 WebSocket 技 术 的 浏览 器， 并 将 用 Flash 技 术 作 为 替 
1 








10.3.3” 回 退 方 案 


并 不 是 所 有 的 浏览 套 都 能 文 持 Socket 连 接 技 术 ， 但 Adobe Flash 拉 术 很 早 之 前 束 提 供 了 这 一 功 
能 。 可 以 使 用 Flash 技 术 来 担当 socket 通 信 层 ， 同 时 ， 得 益 于 web-socket-js 库 "的 支持 ， 我 们 可 以 轻 
松 实现 一 个 基于 Flash 技 术 的 回 退 方 案 。 

下 载 web-socket-js 库 ”并 放置 到 项 目 中 。 同 时 ,我 们 还 将 再 次 使 用 Modernizr 来 检测 浏览 器 对 
WebSocket 的 支持 ,在 javascripts/chat.js 文 件 中 加 载 Modernizr 库 功能 ,首先 ,在 页 面 中 添加 Modernizr 
库 引 用 ， 之 后 ， 使 用 如 3.1 节 包含 Load ( ) 函数 的 定制 代码 : 








html5 websockets/index.html 


<script Src=' JavascrzptsV/1nodernizr. JsS'></SCrIpt> 


接 下 来 ， 在 javascripts/chat.js 文 件 中 使 用 Modernizr.tLoad() 加 载 并 配置 回 退 方案 : 





html5_websockets/javascripts/chat.js 
> Modernizr.Load ( 


> 

> test: Modernizr .websockets, 
> nope: 

> { 


GD http://github.com/gimite/web-socket-js/ 
@) https://github.com/gimite/web-socket-js/archive/master.zip 
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} 


> "swfobject" : "web-socket-7s/swfobject.i7s", 
> "websocket" : "web-socket-7;s/web socket.is" 
> 1 
> callback: function(url, result, key)t 
> If (!resuLt){ 
> if(key === "swfobject"){ 
> WEB SOCKET SWF LOCATION = "web-socket-is/WebSocketMain, swf",; 
> WEB SOCKET DEBUG = true; 
> } 
> } 
> }, 
> complete: function()t{ 
setupChat(); 
> } 
> 
> ) 


当 浏 览 侣 不 支持 socket 时 ， 束 会 调用 web-socket-js 库 ， 但 我 们 还 需要 设置 一 个 变量 来 指定 
WebSocketMain 文 件 的 位 置 ， 我 们 将 在 callback( ) 苑 数 里 来 实现 , 但 只 有 在 不 支持 socket 的 情况 
下 才 需 要 这 么 做 。 

我 们 在 这 段 代码 中 加 载 了 两 个 独立 的 脚本 文件 ，catLLback( ) 函数 在 脚本 文件 加 载 时 即 被 触 
发 。Modernizr 用 key 来 标识 各 个 脚本 文件 ，key 将 作为 参数 传 给 caLtLback( ) 因数 。 这 样 ， 我 们 就 
可 以 通知 caLtback() 函数 哪个 脚本 文件 被 加 载 了 。 在 这 里 ， 当 web-socket-js 脚 本 文件 被 加 载 时 ， 
我 们 就 通过 key 来 识别 具体 加 载 的 脚本 文件 ， 以 便 设 置 回 退 方案 所 需 的 变量 。 

不 管 我 们 的 浏览 絮 是 否 支 持 socket 特 性 ， 都 需要 运行 sSetupChat() 方 法 ， 以 启动 聊天 应 用 。 
为 此 ,我 们 将 setupChat () 方 法 移 到 comptLete() 回 调 国 数 中 。 无 论 测 试 结 采 如 何 ，compLete( ) 
回调 冰 数 总 是 在 加 载 过 程 即 将 结束 时 运行 ， 非 常 合适 用 来 放置 必须 执行 的 代码 。 

随 着 上 述 工作 的 完成 ， 聊天 应 用 就 能 够 在 所 有 的 主流 浏览 器 上 运行 了 , 前 提 是 聊天 服务 器 的 
托管 主机 也 需要 提供 Flash Socket 委 略 文件 。 

















10.3.4 Flash Socket 策略 文件 


出 于 安全 目的 ，Flash 播 放 融 只 能 与 允许 连接 到 Flash 播 放 融 的 服务 套 进 行 socket 通 信 。Flash 
播放 希 会 首先 试图 通过 服务 硕 843 闪 口 获 取 一 个 简单 的 XML 文件 ,这 个 文件 名 为 Flash Socket 策 略 
文件 ， 如 采 通 过 843 端 口 获取 不 到 该 文件 ， 接 独 就 会 答 试 到 服务 融 相 同 端口 上 获取 。 播 放 希 发 送 
包含 以 下 数据 的 请 求 : 


<policy-file-request/> 


接 下 来 ，Flash 播 放 骨 期 望 服 务 胡 返回 如 下 格式 的 啊 应 : 


<cross-domain-policy> 
<allow-access-from domain="*" to-ports="*" /> 
</cross-domain-policy> 
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这 是 一 个 非常 通用 的 策略 文件 ， 人 允许 所 有 用 户 连 接 到 服务 上 。 如 采 要 进一步 考虑 数据 的 安全 
性 ， 可 以 设置 更 多 的 限制 策略 。 记 住 必 须 将 此 文件 放 在 与 WebSocket 服 务 右 相同 的 IP 地 址 上 ， 并 
使 用 与 WebSocket 服 务 器 相同 的 端口 或 指定 的 843 端 口 。 最 好 能 放 在 843 端 口 ， 因 为 Flash 播 放 器 总 
是 首先 发 送 请 求 到 这 个 端口 。 

在 本 书 的 示例 代码 中 , 使 用 的 样 例 Web 服 务 套 包含 了 一 个 简单 的 Flash Socket 策 略 服务 天 ， 
此 ， 你 可 以 用 来 测试 代码 。 关 于 设置 Node.js 和 样 例 服务 需 的 说 明 ， 请 参考 前 言 部 分 相关 内 容 。 服 
务 需 一 日 运行 起 来 ， 你 就 可 以 通过 http:/localhost:8000/html1s websockets/index.html 来 使 用 这 个 完 
整 的 聊天 服务 应 用 了 。 你 可 以 答 试 更 多 好 玩 的 操作 ， 通 过 IE 8 和 Chrome 连 接 到 聊天 服务 项 ， 即 可 
以 测试 WebSocket 新 特性 ， 又 可 以 测试 回 退 方案 ， 如 图 10-3 所 示 。 


/EMy Chat Server - Windows Internet Explorer 
| | My Chat Server As 一 一 




















pw) http://192,168,1.2:8000ihtmls_websockets/index,html 





后 -A localhost:80001html5_websockets 届 
C 全 / File Edit View Favorites Tools Help 





-7 Favorites | 让 全 Suggested 5ites * 乱 | Free Hotmail 乱 | ‘Web Slic 


AwesomeCo Help! 


Nickname Ted | Change 


connecting.... 

Connected to the server 

*** ChatUser0 is now known as Ted 
Ted : Hi everyone! 

* ChatUserl has joined! 

***# ChatUserl js now known as Barmey 
Barney : Hi there! 





臣 My chat 5erver 
AwesomeCo Help! 
Nickname [Bamey Change | 
connecting.... 


Connected to the server 
*** ChatUserl] is now known as Barney 
Barney : Hi therel 


Message | Send | 


Message | 


图 10-3” 跨 浏览 絮 聊 天 
如 果 你 用 虚拟 机 来 做 测试 ， 请 确保 使 用 了 运行 聊天 服务 器 的 计算 机 的 卫 地 址 ， 因 为 LocaLhost 
我 们 无 法 在 这 里 进一步 开展 讨论 , 你 可 以 参考 本 书 源 代码 中 的 lib/chatjs, 来 了 解 聊 天 服务 需 
的 实现 。 
聊天 服务 器 应 用 还 只 是 一 个 开始 。 有 了 WebSocket 特 性 ， 我 们 最 终 就 有 了 一 个 将 数据 实时 推 
送 到 用 户 浏览 融 的 强大 而 简单 的 途径 。 
下 面 ， 我 们 将 使 用 Web 浏 览 器 来 判断 经 纬度 。 
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10.4 实例 33: 你 在 哪儿 : Geolocation 


Geolocation( 地 理 定位 ) 是 一 种 基于 用 户 计算 机 的 位 置 ， 判 断 他 们 所 处 地 理 位 置 的 技术 。 当 

，“ 计 算 机 ”可 以 是 乔 能 手机 、 平 板 电 脑 或 其 他 便携 式 设备 ,以 及 果 面 或 笔记 本 电脑 ,Geolocation 
ese IP 地 址 、MAC 地 址 、Wi-Fi 热 点 位 置 、 其 至 是 GPS 坐 标 来 判断 用 户 的 位 置 。 严 
格 来 说 ，Geolocation 并 非 HIML5S 规 范 的 一 部 分 (一 直 就 不 是 )， 但 它 经 常 跟 HTML5 联 系 在 一 起 ， 
为 它们 几乎 同时 出 现 。 如 同 Web Storage，Geolocation 是 一 项 非常 有 用 的 技术 ， 并 已 在 Firefox、 
Safari 以 及 Chrome 中 得 到 了 支持 。 让 我 们 来 看 看 如 何 使 用 Geolocation。 











10.4.1 为 AwesomeCo 公 司 开发 定位 功能 

我 们 已 经 为 AwesomeCo 网 站 开发 了 一 个 联系 页 面 ， 此 时 该 公司 CIO 又 提出 ， 能 和 否 实现 一 个 功 
能 ， 将 公司 员工 连同 多 个 支持 中 心 的 位 置 在 地 图 上 一 并 显示 出 来 。 他 希望 看 到 一 个 原型 ， 因 此 ， 
就 让 我 们 赶快 做 出 一 个 来 吧 。 

我 们 将 通过 Google 的 静态 地 图 API 来 做 这 件 事情 ， 因 为 它 不 需要 一 个 API key， 同 时 我 们 只 需 
要 生成 一 个 很 徐 单 的 地 图 。 实 现 后 的 效果 如 图 10-4 所 示 : 
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图 10-4 ”当前 位 置 在 地 图 上 标识 为 Y 


AwesomeCo 公 司 的 服务 支持 中 心 分 别 位 于 俄勒冈 州 的 波 特 寺 兰 、 伊 和 入 斯 外 的 芝加哥 以 及 罗 德 
岛 州 的 普罗 维 登 斯 。Google 静 态 地 图 API 使 得 在 地 图 上 标 绘 这 些 地 点 变 得 非常 容易 。 我 们 只 需 构 
建 一 个 <img> 标 签 并 传人 UREL 格 式 的 地 址 ， 如 以 下 代码 所 示 : 








html5_ geolocation/index.html 


<img id="map" alt="Map of AwesomeCo Service Center locations" 
src="http://maps.google.com/maps/api/staticmap? 
入 amp ; p; CT FO—O0NNyv AN 


Ei Nd Wd 


&amp; sensor=false 
&amp;maptype=roadmap 
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&amp ;markers=color:green| label:A|li+tDavolt+sgquare, +Providence, +RI+02906-3816 
&amp;markers=color:green| Label:B|22+Southwest+3rd+Avenue, Port land, +0R 
&amp; markers=color:green| label:C|77+West+Wacker+Drive+Chicago+iL "> 


我 们 定义 了 图 像 的 大 小 ， 之 后 通知 地 网 API 我 们 并 不 打算 使 用 任何 传 感 融 设备 〈 如 可 以 发 送 
计 息 给 地 图 的 客户 站 定位 仪 )。 紧 接着 在 地 图 上 为 各 个 支持 中 心 定义 标记 ， 并 给 每 个 标记 分 配 一 
个 标签 和 一 个 地 址 。 如 朵 有 各 个 支持 中 心 的 经 纬度 坐标 的 话 ， 可 以 在 这 些 标记 的 坐标 描述 部 分 使 
用 逗号 隅 开 的 经 纬度 坐标 信息 ,但 在 这 里 ， 使 用 地 址 信息 来 描述 便于 我 们 演示 说 明 。 











10.4.2 ”如 何 被 找到 


需要 在 地 图 上 标 绘 出 访问 者 当前 的 位 置 , 我 们 将 通过 为 新 标记 提供 经 纬度 的 方式 来 实现 。 通 
知 浏览 硕 获 取 访 问 痢 经 纬度 的 代码 如 下 所 示 : 














html5_ geolocation/javascripts/geolocation.js 

var getLatitudeAndLongitude = function(){ 

navigator.geolocation.getCurrentPosition(function(position) { 
showLocation(position.coords.latitude, position.coords. longitude); 
D9， 

1 

这 个 方法 提示 用 户 将 他 们 的 经 纬度 坐标 数据 提供 给 我 们 。 如 采访 问 者 允许 我 们 使 用 其 位 置信 
息 ， 我 们 接 下 来 就 调用 showLocation() 方 法 。 


showLocation() 方 法 传人 经 纬度 并 重 构图 像 ， 用 新 的 图 像 源 取代 原来 的 图 像 源 。 实 现代 三 
如 下 所 示 : 














html5_ geolocation/javascripts/geolocation.js 


Line1 Var showLocation = function(lat, lng)t{ 
2 var fragment = "é&markers=color:red|lcolor:red|label:Y|" + lat + "," + lng; 


3 Var image = $("#map"); 

4 var source = image.attr("src") + fragment; 

5 source = source.replace("sensor=false", "sensor=true"); 
6 ijmage.attr("src", source); 

2 








我 们 疫 有 重复 生成 整个 图 像 源 的 代码 ， 而 是 追加 新 的 经 纬度 坐标 信息 到 已 有 图 像 源 的 代码 
后 。 将 修改 后 的 图 像 源 应 用 回 HTML 文 档 中 之 前 ， 需 要 将 sensor 参 数 由 原来 的 false 改 为 true( 见 
第 5 行 的 replace() 方 法 )。 


最 后 ， 调 用 前 面 定 义 的 getLatitudeAndLongitude() 方 法 ， 启 动 应 用 。 





html5_ geolocation/javascripts/geolocation.js 


getLatitudeAndLongitude( ) ， 


在 浏览 带 中 打开 页 面 时 ， 束 可 以 看 到 我 们 的 位 置 了 ， 在 一 堆 位 置 中 用 Y 标 识 。 
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10.4.3” 回 退 方案 


实际 上 , 使 用 不 支持 Geolocation 特 性 的 浏览 副 的 有 用户, 也 能 够 看 到 奏 有 AwesomeCo 公 司 支 持 
中 心 位 置 的 地 图 , 但 是 他 们 会 得 到 一 个 JavaScript 错 误 信 息 ， 因 为 无 法 Geolocation 对 和 象 。 因 此 , 在 
获取 访问 者 位 置 之 前 ， 我 们 需要 先 检测 浏览 兹 对 Geolocation 特 性 的 支持 情况 。 可 以 再 次 使 用 
Modernizr 库 ， 但 如 果 无 法 通过 浏览 硕 获 取经 纬度 的 话 ， 应 该 去 哪里 获取 这 些 数据 呢 ? 

Google 的 Ajax API 可 以 进行 位 置 查找 ， 因 此 ， 这 是 个 非常 棒 的 回 退 解决 方案 。™ 


回 退 方案 的 代码 如 下 所 未: 











html5_ geolocation/javascripts/geolocation.js 


Line1 var getLatitudeAndLongitudeWithFallback = function(){ 
2 If ((typeof google === 'object') && 


3 google. loader A& google.loader.ClientLocation) { 

4 showLocation(google.loader.ClientLocation. latitude, 
5 google. loader.ClientLocation. longitude), 
6 +eLset 

7 Var message = $("<p>Couldn't find your address.</p>"); 
8 message.insertAfter("#map"); 

9 】 

10 }; 


我 们 使 用 Google 的 CLientLocation() 方 法 (第 3 行 ) 来 获取 访问 者 的 位 置 , 并 调用 前 面 实现 
的 showLocation() 方 法 来 在 地 图 上 标 绘 出 位 置 。 


之 后 , 使 用 Modernizt 库 来 检测 Geolocation 特 性 。 如 果 浏 览 器 支持 Geolocation 特 性 ， 就 调用 原 
有 代码 。 如 果 不 支持 ， 我 们 就 用 Modernizr,tLoad() 方 法 的 简化 版 本 加 载 Google 提 供 的 jsapi 库 ， 
之 后 调用 上 面 的 jsapi 库 getLatitudeAndLongitudeWithFaLLback() 方 法 来 标 绘 坐 标 。 


html5_ geolocation/javascripts/geolocation.js 


if (Modernizr.geolocation)t{ 
getLatitudeAndLongitude(); 
}elsef{ 
Modernizr.load(t{ 
load: "http://www.googtle.com/isapi", 
callback: function(){ 
getLatitudeAndLongitudeWithFaltlback(),; 


}); 
} 


然而 ,Google 无 法 定位 所 有 的 IP 地 址 , 因此 , 我 们 可 能 仍然 无 法 在 地 图 上 标 绘 出 用 户 的 位 置 ; 
此 ， 我 们 在 第 7 行 输出 一 条 信息 来 向 用 户 说 明 这 种 情况 。 这 里 的 回 退 方案 并 不 人 简单， 但 它 提供 








GD http://code.google.com/apis/ajax/documentation/#ClientLocation 
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了 一 个 定位 用 户 的 更 好 的 机 会 。 

当前 暂时 还 没有 一 个 获取 客户 端 坐 标的 可 徘 方 法 , 我 们 得 想 个 办 法 , 让 用 户 将 其 地 址 提供 给 
我 们 ,但 这 件 事 就 交 给 你 了 。 

接 下 来 ， 我 们 看 一 下 HTMLS 内 建 支持 的 拖 放 元 素 。 


10.5 实例 34: 遂 过 皂 放 来 整理 内 容 


自 鼠 标 出 现 之 日 起 , 我 们 早已 习惯 拖 着 元 素 满 屏 萌 跑 了 。 多 年 来 , 我 们 依靠 JavaScript 与 DOM 
解决 方案 来 实现 浏览 硕 拖 放 功 能 。HIML5S 规 范 提 供 了 一 种 原生 且 性 能 更 高 的 元 素 拖 放 方式 ， 尽 
管 实 现 起 来 有 些 复杂 。 

AwesomeCo 公 司 的 管理 团队 有 个 关于 软件 产品 的 主意 : 用 户 可 以 在 虚拟 卡片 上 写 下 想法 , 之 
后 在 屏幕 上 对 这 些 卡片 进行 重新 整理 和 排序 。 我 们 要 为 这 项 工作 创建 基本 用 户 界 面 , 这 对 我 们 来 
说 是 个 实践 原生 Drag and Drop〈 拖 放 ) 功能 的 恨 机 。 最 终 效 果 如 图 10-5 所 示 。 














Quick Planner 


Add card 






This is the second card This is the third card 





This is the first card 


This is the fourth card 


This is the fourth card 


图 10-5 卡片 排序 应 用 能 够 四 处 拖 上 卡片 





10.5.1 创建 基本 用 户 青 面 


我 们 开始 使 用 基本 的 HTMLS 内 容 来 构建 应 用 界面 ， 包 括 一 个 引用 stylesheets/style.css 样 式 表 
文件 的 链接 、 一 个 用 于 添加 卡片 的 按钮 ， 以 及 一 个 可 以 插入 卡片 并 排序 的 屏幕 区 域 范 围 。 




















html5_ dragdrop/index.html 

<1DOCTYPE htmL> 

<html lang='en'> 
<head> 
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<meta charset="utf-8"> 
<title>AwesomeCards</title> 
<LInk rel="stylesheet" href="stylesheets/style.css'"> 
</head> 
<body> 
<hl>Quick Planner</h1> 
<input type="button" id="addcard" value="Add card'"> 


<div id="cards'"> 
</div> 


</body> 
</html> 


接 下 来 ,我们 会 在 stylesheets/style.css 样 式 文件 中 创建 应 用 程序 的 CSS 代 码 。 当 我 们 点 击 添加 
卡片 按钮 ， 就 通过 JavaScript 创 建 各 个 卡片 ， 卡 片 的 标记 代码 如 下 所 示 : 


<div class="card" draggable="true" id="cardi"> 
<div class="editor" contenteditable="true"></div> 
</div> 
每 张 卡片 都 是 一 个 <div> 标 签 航 在 男 一 个 <div> 标 签 中 ,里 面 的 <div> 标 签 供用 户 输 入 信息 使 
用 ， 因 此 ， 我 们 将 在 两 个 <div> 元 素 间 添加 一 些 间距 ， 具 体 样式 代码 如 下 : 














html5_dragdrop/stylesheets/style.css 
.Cardt 
background-color: #ffc; 
border: lpx solid #000, 
float: Left， 
height: 200px; 
margin: 10px ; 
width: 300pxX ; 


.editort{ 
border: none ; 
margin: 5%; 
width: 90%,; 
height: 80%; 


.editor:focus{ background-color: #ffe; } 
.Card:active{ border: 3px solid #333; } 


当 用 户 点 击 并 “ 抓 住 ” 卡片, 我 们 使 用 :active 伪 类 来 改变 卡片 边界 , 以便 识 别 当 前 活动 卡片 。 


10.5.2 添加 卡 户 到 青 面 
首先 ， 需 要 编写 点 击 添加 卡 卢 按钮 时 添加 的 新 卡 订 的 代码 。 我 们 依 助 一 点 jQuery 代码 来 完成 
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这 项 任务 ， 并 通过 一 个 函数 来 封装 这 段 逻 辑 。 


html5_dragdrop/javascripts/cards.js 


Line1 addCardClickHandler = function( )1{ 
window.currentCardIndex = window.currentCardIndex || 0; 
$("#addcard") .click(function(event)t 

event .preventDefauLt () ; 


Var card = $("<div></div>") 
.attr("id", "card" + (window.currentCardIndex++)) 
.attr("class", "card") 
.attr("draggable", true); 


Var editor = $("<div></div>") 
.attr("contenteditable", true) 
attr("clasos", “editor"). 


card.append(editor); 
card.appendTo($("#cards")); 

0) 
二 

当 我 们 添加 一 张 卡 片 ， 需 要 为 其 分 配 一 个 唯一 的 ID。 也 可 以 通过 一 个 复杂 机 制 来 实现 , 但 在 
这 里 只 用 一 个 人 简单 的 计数 带 就 好 。 在 第 2 行 ， 我 们 引用 了 一 个 currentCardIndex 变 量 ， 其 作为 
window 对 象 的 属性 被 添加 ,第 一 次 调用 这 个 子 数 时 ,该 变量 初始 化 为 0。 我 们 将 该 变量 作为 vindow 
对 象 的 属性 添加 ， 是 为 了 在 后 绪 的 函数 调用 过 程 中 ,让 变量 值 一 直 存 在 ( 全 局 变量 ,这 样 计数 各 
才 会 不 断 累 加 )。 要 记 住 ，window 对 象 是 全 局 可 见 的 。 在 更 复杂 的 场景 里 ， 我 们 可 以 创建 自己 的 
Application 应 用 对 象 ， 并 将 值 存在 这 个 对 和 象 里 ， 避 人 免 污 染 全 局 作用 域 。 


之 后 ， 为 卡片 创建 新 元 系 。 我 们 实现 了 一 个 用 来 呈现 卡片 的 外 层 <div> 元 率 ， 以 及 一 个 设置 
了 contenteditable 属 性 的 内 层 <div> 元 素 ， 用 来 封装 信息 文本 内 容 。 使 用 jQuery 函数 创建 card 
元 素 ( 其 实 就 是 相册 的 两 个 <div> 元 取 的 组 合 标 记 )， 之 后 ， 在 第 7 行 ， 通 过 递增 currentCard 
Index 变 量 来 设置 card 元 素 的 ID。 


最 后 ， 为 外 层 <div> 元 素 应 用 card 类 ， 设 置 draggabtLe 属 性 为 tue， 并 将 card 元 素 追 加 到 
#cards 区 域 中 去 。 人 完成 了 这 些 工 作 后 ,我们 就 可 以 点 击 添加 卡片 按钮 ， 这 时 ， 一 个 新 的 索引 卡 
片 就 会 被 添加 到 用 户 界 面 ,由 于 设置 了 contenteditable 属 性 , 我 们 就 可 以 点 击 每 张 卡 片 并 在 编 
辑 卡 片 的 文本 内 容 。 















































10.5.3 ”整理 卡片 


编写 整理 卡片 的 代码 之 前 ， 先 来 考虑 其 实现 方式 。 当 拖 忠 一 张 卡 片 ( 拖 忠 源 ) 到 万 一 张 卡片 
( 拖 放 目 标 ) 之 上 并 释放 鼠标 时 ， 拖 熏 源 卡片 驶 会 插入 到 撒 下 那 张 拖 放 目 标 卡片 的 后 面 。 要 达成 
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此 目的 ,我 们 传递 拖 奥 源 卡 片 ID 给 拖 放 目 标 卡片 元 素 。 当 拖 鼻 源 卡 片 沙 下 ， 就 使 用 jQuery 并 通过 
元 系 ID 来 定位 它 〈 拖 鼻 源 卡片 元 系 )， 并 将 其 移动 到 合适 的 位 置 上 。 


Drag and Drop 规 范文 持 以 下 事件 : 





事件 描述 

ondragstart 当 用 户 开始 拖 跑 某 个 拖 忠 源 对象 时 触发 ， 事件 作用 在 拖 忠 源 上 

ondragend 当 用 户 出 于 某 些 原 因 停止 拖 点 某 个 拖 中 源 对 象 时 触发 ,事件 作用 在 拖 忠 源 上 

ondragenter 当 拖 电源 元 素 移 人 拖 放 目 标 范围 时 触发 ， 事 件 作 用 在 拖 放 目标 上 

ondragover 当 拖 电源 元 素 在 拖 放 目标 上 方 移动 时 触发 ， 事 件 作用 在 拖 放 目 标 上 

ondragleave 当 拖 忠 源 元 素 移 出 拖 放 目 标 范围 时 触发 ， 事件 作用 在 拖 放 目标 上 

ondrop 当 释放 鼠标 ， 拖 中 源 元 素 落 到 拖 放 目 标 上 时 触发 ， 事件 作用 在 拖 放 目 标 上 

ondrag 拖 中 某 个 拖 忠 源 对 象 时 就 会 连续 不 断 地 触发 该 事件 ， 并 会 返回 当前 鼠标 位 置 的 X 和 Y 轴 坐标 





值 ， 事件 作用 在 拖 忠 源 上 


从 构建 应 用 代码 的 角度 出 发 ， 只 需 关 心 其 中 的 几 个 事件 即 可 。 

先 来 创建 一 个 新 的 createDragAndDropEvents () 国 数 ， 它 负责 本 例 中 需要 用 到 的 所 有 拖 放 
功能 事件 处 理 。 在 这 个 水 数 中 ， 我 们 首先 需要 做 的 就 是 通过 jQuery 来 获取 页 面 #cards 区 域 。 这 是 
程序 插入 卡片 的 区 域 。 














html5_dragdrop/javascripts/cards.js 
var createDragAndDropEvents = function(){ 
Var cards = $("#cards"); 

}; 

在 这 个 方法 里 将 定义 各 种 拖 放 事件 。 当 用 户 开始 拖 忠 一 张 卡片 时 , ondragstart() 方 法 就 会 
被 触发 。 我 们 需要 为 该 事件 创建 一 个 事件 处 理 程序 , 在 这 个 事件 处 理 程 序 中 , 我 们 要 获取 卡片 ID， 
并 将 有 D 存 人 dataTransfer 对 象 中 ， 这 个 对 象 保存 从 一 个 元 素 拖 虹 到 男 一 个 元 素 的 内 容 ， 我 们 使 
用 setData() 方 法 来 将 这 些 内 容 保 存 到 dataTransfer 对 象 中 。 

要 完成 上 述 所 有 任务 , 我 们 打算 监测 每 张 卡片 的 ondragstart() 事 件 ,为 每 张 卡片 添加 事件 
处 理 程序 将 出 现 一 大 堆 匈 余 的 处 理 代码 , 这 将 影响 性 能 , 因此 , 我 们 使 用 jQuery 来 创建 委托 事件 。 
在 页 面 #cards 区 域 上 创建 事件 , 但 通知 jQuery 将 此 事件 委派 给 某 张 独立 的 卡片 。 这 个 事件 也 将 被 
后 面 用 户 汐 加 的 新 卡片 所 注册 。 


在 createDragAndDropEvents () 函数 里 ， 以 下 代码 用 于 创建 事件 处 理 程序 并 存储 卡片 ID。 

















html5_dragdrop/javascripts/cards.js 
Line1 cards.on("dragstart", ".card", function(event)t{ 
2 event .originalEvent.dataTransfer.setData('text', this.id),; 
3 }); 
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这 里 的 setData( ) 方 法 需要 两 个 参数 : 所 需 保 存 数据 的 类 型 及 内 容 。 由 于 我 们 只 保存 元 素 ID， 
此 将 数据 类 型 设 为 文本 类 型 。setData() 可 以 接受 一 些 MIME 类 型 作为 第 一 个 参数 ， 但 为 了 考 
虚 对 老式 浏览 器 的 最 大 兼容 性 ， 这 里 我 们 只 使 用 text 关 键 字 ， 这 个 关键 字 为 HTML5 规 范 所 支持 
并 对 应 text/plain MIME 类 型 。 在 本 书 出 版 之 际 ， 针 对 本 例 场景 ，IE 10 是 唯一 无 法 识别 MIME 
类 型 的 现代 浏览 需 。 

当 我 们 释放 鼠标 ,将 拖 忠 源 卡 片 落 到 拖 放 目标 卡片 上 时 ,我 们 希望 拖 忠 源 卡 片 排 在 拖 放 目 
标 卡 片 之 后 。 我 们 通过 ondrop() 事 件 来 处 理 ，ondrop() 事 件 的 处 理 方式 与 ondragstart() 事 
件 相 同 。 











html5_dragdrop/javascripts/cards.js 


Line1 cards.on("drop",".card", function(event)t{ 
2 event .preventDefault(); 


3 var id = event.originalEvent.dataTransfer.getData('text'); 
4 Var originalCard = $("#" + id),; 

5 originalCard.insertAfter(this),; 

6 return(faLse) ; 

Pa 


我 们 从 dataTransfer 对 象 中 获取 拖 息 源 元 素 的 ID , 并 使 用 getData() 方 法 来 指定 数据 类 型 。 
接 下 来 , 使 用 获取 的 用 来 创建 一 个 新 的 jQuery 元 素 ， 之 后 使 用 insertAfter() 方 法 将 该 元 素 放 在 
当前 元 素 〈( 即 拖 放 目 标 卡 片 ) 的 后 面 。 请 记 住 ， 每 张 卡片 既是 拖 忠 源 元 素 又 是 拖 放 上 日 标 元 素 。 

getData() 方 法 只 能 够 在 drop() 事 件 中 使 用 。 出 于 安全 原因 ,规范 并 不 允许 其 他 的 拖 放 事 件 
访问 存储 内 容 。drop() 事 件 也 是 仅 有 的 一 个 用 户 不 能 取消 的 拖 放 事 件 。 

为 了 确保 拖 放 操作 正确 进行 ， 我 们 需要 阻止 dragover 事 件 的 触发 ， 因 为 该 事件 在 默认 情况 
下 ,会 导致 浏览 器 阻止 我 们 将 元 素 落 到 其 他 元 素 上 。" 因 此 ,我 们 在 createDragAndDropEvents() 
咀 数 中 添加 以 下 代码 ， 以 便 将 拖 虹 源 卡片 落 到 拖 放 目标 卡片 。 

















html5_dragdrop/javascripts/cards.js 


cards.on("dragover", ".card", function(event)t 
event.preventDefault!(); 
return(false); 

人 


以 上 就 是 主要 的 功能 实现 , 但 在 这 种 拖 放 及 contenteditable 属 性 工作 方式 下 , 我 们 也 遇 到 
了 一 个 缺陷 。 可 拖 放 元 素 是 不 可 编辑 的 。 为 了 解决 这 个 问题 ， 当 卡片 编辑 区 域 “ 获 得 焦点 时 ， 我 
们 将 移 除 卡片 元 素 的 draggabLe 属 性 ， 而 在 卡片 编 辑 区 域 失 去 焦点 时 ， 周 为 卡片 元 素 重 新 添加 回 
draggabtLe 属 性 。jQuery 的 parent ( ) 方 法 让 获取 卡 卢 元 素 的 操作 变 得 非常 价 单 。 























GD https://developer.mozilla.org/en-US/docs/Web/Reference/Events/dragover 
@) 即 前 面 提 到 每 张 卡 片 中 的 第 二 个 <div> 元 素 : <div class="editor" contenteditable="true"></div>。 一 一 译 者 注 
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html5_dragdrop/javascripts/cards.js 


cards.on("focys",".editor" , function(event)t 
$(this).parent().removeAttr('draggable'); 


1 


cards,.on("blur",".editor", function (event){ 
$(this).parent().attr('draggable', true); 


上 


最后 ， 


局 动 以 下 两 个 函数 来 添加 事件 : 


html5_dragdrop/javascripts/cards.js 


createDragAndDropEvents(); 
addCardCLickHandLer( ) ; 


现在 ,我 们 就 可 以 添加 和 编辑 卡片 ， 并 能 够 四 人 处 拖 放 它 们 进 











还 无 法 在 老式 浏览 带 中 运行 。 


10.5.4” 回 退 方 案 
这 时 候 ， 


持 draggable 属 性 来 判断 浏览 媳 


Modernizr 库 就 无 法 帮助 我 们 检测 Drag and Drop 特 性 了 ,IE 8 支持 Drag and Drop 特 性 ， 
但 对 该 特性 的 文 持 仅 限于 所 选 文本 、 链接 以 及 图 像 。 因此 ， en 
持 Drag and Drop 特 性 ， 仍 然 无 法 完全 支持 该 特性 。 这 样 ， 我 们 将 转 而 通过 检测 <div> 元 系 是 
是 否 文 持 Drag and Drop 特 性 。 如 有 果 不 文 持 ， 我们 就 通过 jQuery UI 


库 的 sortable() 方 法 来 满足 我 们 的 拖 放 整 理 需求 。” 


- }elsef 


html5_dragdrop/javascripts/cards.js 


Line1 if ('draggable' in document.createElement('gdgiv')) { 
createDragAndDropEvents(); 


Modernizr.load( 


{ 


load: "http://code. jquery,.com/ui/1.10,3/jquery-u1i.i1s", 


callback: function(result, url, key)t 
$('#cards').sortable(); 


- addCardClickHandler():; 


在 第 1 行 , 我 们 检测 浏览 硕 对 <div> 标 签 的 draggabLe 属 性 文 持 情况 。 如 果 文 持 该 属性 ， 则 解 


GD http://jqueryui.com/sortable/ 


了 整理 排列 了 。 
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当然 ,目前 的 方 





是 人 否 文 
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发 createDragAndDropEvents() 方 法 。 否 则 ， 束 用 Modernizr.load() 来 加 和 载 jQuery UI 库 。 


一 旦 jQuery UI 库 补 加载， 我 们 就 使 用 该 库 提 供 的 sortable() 方 法 来 将 #cards 区 域 转变 为 可 
拖 放 整理 区 域 。#cards 区 域 中 的 所 有 子 元 素 都 将 变 得 可 拖 放 。 仔 细 看 看 第 8 行 ， 这 行 代码 实现 了 
我 们 通过 原生 Drag and Drop 文 持 特 性 所 做 的 一 切 。 当 然 , 这 是 必须 添加 的 一 行 代码 ; 我 们 仍然 不 
得 不 引入 一 个 外 部 函数 库 。 


jQuery UI 库 里 面 有 很 多 非常 棒 的 内 容 ， 从 日 期 选取 小 部 件 到 复杂 的 动画 ,让 你 应 接 不 暇 。 它 
是 个 庞大 的 库 ， 你 也 许 并 不 需要 它 所 包含 的 所 有 东西 。 在 这 里 ， 我 们 通过 CDN 加 载 jQuery UI 库 。 
但 在 生产 环境 中 , 你 应 该 下 载 这 个 库 并 只 加 载 所 需要 的 组 件 。jQuery UI 网 站 上 有 一 个 工具 能 够 帮 
助 你 实现 它 。? 


即使 有 了 回 退 方案 , 我 们 还 要 关注 男 一 方面 : 可 访问 性 。 针 对 无 法 使 用 鼠标 的 用 户 ， 规 范 并 
没有 加 以 说 明 。 如 果 我 们 实现 了 界面 的 拖 放 功能 , 还 要 开发 一 个 不 震 要 JavaScript 或 鼠标 的 备 选 方 
法 ,这 个 方法 将 视 具 体 的 功能 而 定 。 我 们 的 卡片 排列 应 用 对 于 视 障 者 而 言 是 完全 不 可 用 的 ,因为 
我 们 一 开始 就 没有 考虑 可 访问 性 的 计划 。 可 以 通过 为 每 张 卡 片 添 加 一 个 order 字 段 并 让 用 户 输入 
一 个 数字 ,让 代码 更 具 可 访问 性 。 之 后 提供 一 个 按钮 ， 让 用 户 可 以 按 下 按钮 来 重新 排列 卡片 。 这 
个 界面 甚至 对 视力 正 第 的 用 户 来 说 部 可 用 ， 因 为 有 些 用 户 就 是 不 达 欢 四 处 拖 放 元 系 。 

一 般 情况 下 ,思考 技术 实现 方案 时, 不 要 只 针对 老式 浏览 各 用 户 考 虑 回 退 方案 。 应 该 要 多 思 
考 怎样 做 才能 给 用 户 带 来 丰富 体验 ， 要 知道 , 有些 用 户 硕 望 最 大 程度 地 利用 你 所 创建 的 产品 及 
服务 。 
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本 章 探讨 的 技术 , 尽管 并 不 是 所 有 的 内 容 都 是 HTML5 自 身 规范 的 一 部 分 , 却 引领 着 Web 开 发 
的 未 来 趋势 。 客 户 端 承担 的 角色 将 越 来 越 多 、 越 来 越 重要 。 正 是 有 了 更 好 的 历史 记录 管理 , 对 用 
户 而 言 ，Ajax 和 客户 端 应 用 才 有 了 更 直观 的 感知 和 更 多 的 交互 响应 体验 。 谱 如 GitHub、Flickr 等 
网 站 , 在 大 家 普遍 通过 回 退 方案 来 确保 那些 不 支持 全 部 新 特性 的 功能 正常 运转 时 ,就 率先 将 历史 
记录 History API 新 特性 付 诸 实践 。 在 实时 数据 呈现 及 交互 方面 ，WebSocket 特 性 可 以 替代 周期 轮 
询 远 程 服务 的 方式 ; 现在 ， 协 议 已 经 稳定 了 ， 可 以 预见 WebSocket 特 性 将 在 创建 实时 Web 应 用 中 
越 来 越 流行 ， 特 别 是 IE 10 支 持 该 特性 之 后 。 

跨 域 通信 特性 为 我 们 提供 了 进一步 融合 Web 应 用 的 大 好 机 会 ， 要 知道 ， 在 以 往 要 做 到 如 此 直 
接 的 交互 是 不 可 能 的 。 地 理 定位 能 够 帮助 我 们 创建 更 好 的 位 置 感知 Web 应 用 ， 随 着 移动 计算 市 场 
不 断 壮大 和 发 展 ， 地 理 定位 的 意义 日 趋 凸 显 。 
































GD http://jqueryui.conm/download/ 
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拖 放 特性 同样 很 成 熟 了 。 通 过 结合 File API ， 就 可 以 创建 将 桌面 文件 拖 放 到 浏览 器 中 的 应 用 
程序 ,一 旦 越 来 越 多 的 浏览 器 支持 File API, 你 就 可 以 创建 一 个 采用 纯 Web 实 现 方案 的 拖 放 文件 上 
传 应 用 ， 无 需 借 助 Flash 或 Silverlight 技 术 。 


这 入 探索 这 些 API 及 新 特性 , 并 时 刻 关 注 它们 的 发 展 趋势 。 很 快 你 就 会 发 现 , 它们 是 你 的 Web 
开发 工具 箱 中 的 “ 神 兵 利 靛 ”。 





GD http:/www.w3.org/TR/FileAPI/ 








未 来 之 路 








在 本 书 中 我 们 已 经 讨论 了 许多 内 容 ， 但 还 有 其 他 很 多 让 Web 开 发 更 加 精彩 的 相关 技术 未 提 
到 ， 包 括 WebGL 的 3D-canvas 文 择 、 弹 性 盒子 模型 新 的 布局 方式 ， 以 及 不 用 担心 同 源 案 略 的 Ajax 
请 求实 现 等 内 容 。 如 果 这 些 还 不 够 , 那么 还 有 更 多 的 新 特性 在 等 着 你 去 一 探究 竟 , 诸如 在 后 台 处 
理 数据 、 把 信息 从 服务 器 推送 到 客户 端 ， 以 及 在 图 像 应 用 中 为 元 素 设置 滤 镜 效果 等 等 。 
尽管 规范 可 能 有 点 变化 , 也 可 能 并 不 为 所 有 浏览 器 所 支持 , 但 本 章 涉及 的 技术 在 合适 的 场景 
中 却 能 成 为 一 件 称 手 的 工具 。 我 们 将 在 本 章 探 讨 以 下 主题 。 
口 弹性 盒子 模型 : 使 用 C SS 创建 更 好 的 布局 (C26、F22、S 4、0O 10.6 )。 
口 里 域 资源 共享 ( Cross-Origin Resource Sharing，CORS ),: 实现 跨 域 Ajax 请 求 (C4、F 3.5、 
S4. IE10、 O12.0、 i0S 3.2、A2.1)。 
口 Web Workers: 在 后 台 线 程 中 人 处理 密集 或 长 时 间 运 行 的 任务 (C4、F3.5、S4、IE10、0O12.1、 
iOSS、A2.1 )。 
口 服务 需 发 送 事件 : 把 信息 从 服务 需 单 癌 推 送 到 连接 客户 端 (C6、F6、S$S5、O11、iOS4)。 
DCSS 滤 镜 效 果 (fiLter: bLur(10px) ),: 给 元 素 应 用 模糊 、 灰 度 、 旧 色调 、 阴 影 以 及 其 
他 效果 (C18、S6、015、iOS 6 )。 
口 WebGL 的 3D-canvas 支 持 ": 在 画布 上 创建 3D 对 象 (C8、F4、S5.1、O 12 )。 


我 们 先 来 讨论 一 个 定义 CSS 布 局 的 更 好 方式 。 




















11.1 使 用 弹性 盒子 模型 定义 布局 

使 用 CSS 进 行 布局 最 难 的 地 方 之 一 就 在 于 掌握 如 何 分 辨 清楚 “浮动 和 清除 ”, 这 两 个 CSS 属 性 
使 得 我 们 可 以 告别 表格 布局 方式 ， 用 一 种 新 的 方式 来 对 页 面 进行 布局 。 

但 实际 上 , 我 们 滥用 了 浮动 和 清除 属性 ,现在 需要 一 种 更 好 的 方式 。 这 正 是 设计 弹性 盒子 模 
型 的 初衷 。? 尽管 弹性 盒子 模型 还 不 够 成 熟 ， 却 也 指日可待 ! 有 了 这 个 新 的 模型 ， 设 计 跨 平台 支 




















QD 有 可 能 默认 禁用 ,或 者 需要 最 新 视频 驱动 程序 的 支持 才能 正常 工作 。 
@) http:/www.w3.org/TR/css3-flexbox/ 
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持 的 复杂 布局 就 会 变 得 催 单 。 


下 面 使 用 弹性 盒子 模型 来 实现 一 个 如 样板 般 的 “ 侧 边 栏 在 左边 ， 内 容 区 域 在 右边 ”的 经 典 布 
局 。 先 来 实现 HTML 页 面 的 基本 标记 


where next/flexbox/index.html 
<IDOCTYPE html> 
<htmL> 
<head> 
<meta charset="utf-8"> 
<title>Home</title> 
<link rel="stylesheet" href="stylesheets/style.css" /> 
</head> 
<body> 
<header> 
<hli>AwesomeCo</hl> 
</header> 


<div class="container'"> 


<section id="main"> 
<hl>Some Story</h1> 


<p> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
ejusmod tempor incididunt ut Labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
Nisi ut aliquip ex ea commodo consequat. 
</Pp> 
<p> 
Duyuis aute jirure dolor in reprehenderit In voluptate velit esse cillum 
dolore eu fugiat nuLLa pariatur. Excepteur sint occaecat cupijdatat non 
projdent, sunt In culpa qui officia deserunt mollit anim id est laborum. 
</p> 
</section> 
<section id="sidebar"> 
<UL> 
<li><a href="#">Related Link</a></LIL> 
<li><a href="#">Related Link</a></LIL> 


<li><a href="#">Related Link</a></\i> 
<li><a href="#">Related Link</a></LIL> 
</ul> 
</section> 
</div> 
<footer> 
<p>Copyright © 2013 AwesomeCo</p> 
</footer> 
</body> 


</html> 
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这 样 , 我 们 就 构建 了 一 个 经 典 的 HTML5 模 版 , 连接 了 样式 表 文 件 , 拥有 一 个 <header> 元 厅 、 
一 个 <footer> 元 素 ， 以 及 一 个 看 似 没 什么 用 处 的 <div> 元 素 〈 用 于 包含 主要 区 域 和 侧 边栏 )， 其 
所 有 的 子 元 素 都 是 弹性 元 素 (flex item ) (也 就 是 说 ， 这 个 <div> 元 素 是 弹性 容 需 )。 在 样式 表 中 ， 
定义 <div> 容 各 元 系 ， 代 人 码 如 下 所 示 : 














where_next/flexbox/stylesheets/style.css 


.Containert 
display: -webkit-flex,; 
display: flex,; 
} 


之 后 定义 main 区 域 的 宽度 ， 并 在 侧 边 栏 上 设置 fTLex 属 性 ， 使 其 装 满 剩余 空间 。 


where_next/flexbox/stylesheets/style.css 
#maint 

width: 80%; 

-webkit-order: 2; 


order: 2; 
} 
#sidebart 
-webkit-flex: 1; 
EX 


-webkit-order: 1; 
order: 1; 


} 


更 有 趣 的 是 , 我 们 可 以 对 文档 元 素 重 新 排序 。main 区 域 在 文档 中 先 于 侧 边栏 定义 , 但 我 们 可 
以 通过 order 属 性 重新 排列 文档 元 系 ， 使 输出 效果 最 终 看 起 来 如 网 11-1 所 示 。 











AwesomeCo 


Related Link 

Related Link Some Story 

Related Link 

Related Link Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. 


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 





Copyrieht © 2013 AwesomeCo 





图 11-1 设置 侧 边栏 及 主要 区 域 位 置 后 的 布局 


花 些 时 间 想 想 这 对 响应 式 Web 设 计 意 味 着 什么 ; 你 可 以 结合 媒体 查询 使 用 这 各 方式， 轻松 对 
页 面 元 素 重新 排序 花 更 少 的 精力 ， 开 发 体验 更 佳 的 移动 Web 应 用 |! 
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然而 , 各 家 浏览 絮 对 这 种 新 模式 的 支持 度 参差 不 齐 。IE 10 和 Safari 都 支持 这 个 规范 的 老 版 本 ， 
在 iOS 平 台 也 是 这 样 。 你 可 以 通过 Modernizr 库 来 有 条 件 地 加 载 样式 表 ， 或 者 使 用 Flexie 在 页 面 上 
强制 使 用 弹性 盒子 模型 。 "这 上 听 起 来 可 能 有 点 奇怪 ， 但 事实 上 现在 有 相当 多 的 网 站 都 在 使 用 这 个 
回 退 方案 。 你 应 该 权衡 一 下 ， 确 定 它 是 否 适 合 你 的 项 目 。 训 无 疑问 ， 弹 性 盒子 模型 要 比 胡 乱 摆弄 
浮动 和 清除 更 有 吸引 力 。 





11.2 ” 跨 域 资源 共享 

同 源 俩 略 是 一 种 安全 措施 ， 用 于 防止 跨 域 则 的 页 面 Ajax 请 求 。 但 出 于 实际 需要， 我 们 曾经 尝 
试 过 各 种 方式 来 突破 这 种 限制 ， 但 器 域 资源 共 圣 (CORS ) 是 实现 路 服务 天 请 求 的 标准 方式 。 首 
先 ， 几 乎 所 有 的 浏览 带 都 文 持 这 种 方式 ， 包 括 IE 10。 

然而 ， 要 想 正常 使 用 跨 域 资源 共享 功能 ， 访 问 目 标 域 必须 配置 成 接受 CORS 请 求 ， 同 时 ,我 
们 需要 实现 发 送 请 求 的 代码 。 具 体 来 说 ， 服 务 需 需要 以 以 下 头 部 进行 相应 : 

Access-Control-Allow-Origin: * 


就 这 样 ， 只 要 各 项 内 容 设 置 完成 ， 一 个 现代 六 览 可 在 处 理 请 求 服务 时 是 不 会 有 什么 障碍 的 。 

















训 览 融 发 送 一 个 “Origin” 头 部 ， 服 务 表 会 针对 它 人 允许 的 范围 对 这 个 头 部 进行 检查 ,如果 匹配 上 ， 
则 接受 这 个 请 求 。 


由 于 所 有 的 工作 都 在 服务 器 上 完成 , 这 束 超 出 了 本 书 的 讲解 范围 。 可 访问 http://enable-cors.org/， 
找到 其 他 一 些 有 价值 的 信息 ， 包 括 如 何 配置 你 的 服务 硕 。 





11.3 Web Workers 


我 们 使 用 JavaScript 实 现 所 有 的 客户 端 代码 , 但 如 果 一 项 任务 需要 执行 很 长 一 段 时 间 , 就 会 迫 
使 用 户 一 直 等 待 到 任务 结束 。 有 时 甚至 会 导致 用 户 界 面 无 法 啊 应 。Web Workers 通 过 提供 一 种 人 简 
单 的 方式 来 编写 并 行程 序 ， 或 者 把 长 时 间 运 行 的 任务 放 至 后 台 运 行 ,， 来 解决 此 类 问题 。 

Web Workers 并 不 是 HTML5 规 范 的 一 部 分 ， 但 如 果 你 需要 在 客户 端 做 些 后 台 处 理 ， 就 应 该 对 
Web workers 作 进一步 了 解 。” 


来 看 一 个 简单 的 例子 。 我 们 打算 使 用 Web Workers， 并 通过 YouTube 人 公共 API 获 取 数 据 ， 显 示 
缩 略 图 ， 当 用 户 点 击 缩 略 图 时 ， 就 会 播放 一 段 YouTube 视 频 。 最 终 效 果 如 图 11-2 所 示 。 








GD http://flexiejs.com/ 


@) http://www.whatwg.org/specs/web-workers/current-work/ 
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图 11-2 使 用 Web Workers 获 取 的 视频 


YouTube 的 公共 API 支 持 JSONP ( JavaScript ObjectNotation with Padding， 填 充 了 内 容 的 JSON 
格式 数据 ，JSONP 是 一 个 非 官 方 的 协议 ， 是 JSON 的 一 种 “使 用 模式 ”)。 也 就 是 说 ， 和 我 们 以 前 
第 用 的 XmlHttpRequest 方 式 不 同 ， 在 使 用 JSONP 的 情况 下 ， 我 们 将 关键 字 连 同 回 调 孙 数 名 称 一 起 
附加 到 符合 搜索 API 格 式 要 求 的 URL 上 , 并 在 文档 中 将 此 URL 添 加 到 一 个 <script> 标 签 里 。 随 后 ， 
YouTube 上 的 数据 将 传递 给 我 们 指定 的 回调 孔 数 。 我 们 要 做 的 就 是 编写 回调 函数 的 代码 以 解析 数 
据 。 这 种 方式 相当 巧妙 ， 让 我 们 可 以 绕 开 讨厌 的 同 源 生 上 略 限 制 。 


下 面 就 来 实现 它 。 首 先 ， 创 建 一 个 非常 标准 的 HITML 页 面 。 














where next/web workers/index.html 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Web Workers</title> 
<style> 
#0Utput > div{float: left; margin-right: Spx;} 
</StyLe> 
</head> 
<body> 
<input type="button" id="button" value="Get Results"> 
<div id="output"></div> 
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<script 
src="http://alax.googleapis. com/ajax/ Libs/Jjquery/1.9.1/19uery.min.]s"> 
</script> 
<script src="javascripts/application.ijs"></script> 
</body> 
</html> 


页 面 加 载 了 jQuery 库 以 及 一 个 scripts/application.js 脚 本 文件 ， 该 脚本 文件 实现 与 页 面 间 的 
基本 交互 功能 。 我 们 还 在 <head> 标 签 里 添加 了 一 点 CSS 样 式 代 码 ， 以 网 格 方式 排列 获取 到 的 视 
频 缩 略 图 。 


我 们 还 有 另 一 个 JavaScript 脚 本 文件 javascripts/worker.js,， 该 文件 实现 与 YouTube 间 通信 。 这 就 
是 我 们 的 Web Worker， 按 以 下 代码 实现 它 : 





where next/web workers/javascripts/application.js 


Var worker = new Worker("Javascripts/worker.1s"),; 


某 些 JavaScript 文 件 可 以 作为 一 个 worker 来 运行 ,但 对 于 worker 来 说 , 它 必须 独立 于 其 他 脚本 ， 
同时 ，worker 脚 本 不 可 以 访问 DOM。 也 就 是 说 ， 你 不 能 在 其 中 下 接 操纵 元 素 。 但 你 可 以 将 数据 传 
给 worker， 并 在 后 面 取 回 它 。 


我 们 的 application.js 脚 本 通过 postMessage() 发 送信 息 给 这 个 worker， 代 码 如 下 所 示 : 











where next/web workers/javascripts/application.js 
$("#button").click(function(event){ 
worker.postMessage ("pragprog"); 
下 
在 这 个 例子 中 ， ee 回信 息 给 我 们 ， 通 过 监听 worker 的 
onmessage() 事 件 ， 就 可 以 操作 这 些 信 息 了 





where next/web workers/javascripts/application.js 


worker.onmessage = function (event)t{ 


下 


worker.onerror = function(event)t{ 
$("outpout") .html ("Why do you fail??"), 
人 


每 当 worker 回 传 了 数据 ， 即 告 完 成 一 次 执行 。 
因此 ， 现 在 就 来 探讨 一 下 怎样 才能 让 worker 获 取 主 程序 发 来 的 信息 ， 并 回 传 信息 给 主 程序 


(application.js )。 首 先 。worker 自 身 有 一 个 我 们 需要 监听 的 onmessage() 事 件 。 当 主 程序 发 送信 息 
给 worker， 这 个 事件 就 会 触发 。 
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where_next/web workers/javascripts/worker.js 


var onmessage = function(event) { 
var query = event. data; 
getYoutubeResults (query),; 

jn 


我 们 传递 搜索 项 给 自 定义 函数 getYoutubeResults()， 这 个 函数 会 为 我 们 构造 搜索 查询 
URL， 并 发 送 搜索 请 求 给 YouTube。 通 篆 在 使 用 JSONP 时 ， 我 们 不 得 不 通过 给 页 面 添 加 一 个 
<script> 标 签 来 实现 这 个 请 求 。 但 在 Web Worker 里 ， 我 们 没有 访问 DOM、 浏 览 俐 窗口 或 其 他 类 


似 的 对 象 。 然而, 我 们 有 一 个 非常 灵活 的 jmportScripts() 方 法 , 可 以 用 来 调用 本 地 链接 、 相 对 
链接 以 及 远程 链接 。 





where_next/web workers/javascripts/worker.js 


var getYoutubeResuLts = function(searchTerm) { 


Var callback = "processResults", 

url = "http://gdata.youtube.com/feeds/videos?vg=" + SearchTerm + 
"&alt=17son-in-scripté&max-results=5&Ccallback=" + callback; 

importScripts (url); 


1 





这 块 代 码 构 造 了 搜索 URL ， 并 传人 搜索 关键 字 以 及 回调 函数 。 现 在 要 做 的 就 是 实现 
processResutLts() 回 调 函 数 。 


YouTube 网 站 的 啊 应 信息 如 下 所 示 : 


// 回调 函数 
ProcesSsResutLts(t 
WETSTOI 0 
TS el 
LE 


二 "Yideos matching: pragprog", 
"type": "text" 


}， 
"entry": [1 
TELE | 
"$t": "Using tmux for productive mouse-free programming", 
}， 


"mediasgroup": 1{ 
"media$scontent": [+{ 
"url": "http://www, youtube.com/v/JXwS7Z6Dgic, 


"type":; "application/x-shockwave-flash", 
"medium"; "video", 
"isDefault";:; "true" 


站 
"media$sthumbnailt"; f/f 


"urt": "http://i,.ytimg,.com/vi/JXwS7z6Dqic/0. 1pg", 
"height": 360, 
"width"; 480, 


11.3 Web Workers 209 


"TIMe .02 
}] 


}] 


7 

来 仔细 看 一 下 响应 代码 一 一 processResutLts() 回 调 函 数 ， 里 面 回 传 了 一 堆 数 据 。 当 worker 
收 到 YouTube 回 传 的 这 个 啊 应 数据 ， 就 会 执行 它 。 我 们 只 需 转 换 这 些 数据 并 回 传 给 用 户 界面 。 提 
取 缩 略图 及 视频 链接 数据 ,并 将 其 放 到 一 个 新 对 象 里 ,通过 postMessage() 忒 数 回 传 给 用 户 界 面 。 





where next/web workers/javascripts/worker.js 


Var processResults = function(]json) 1{ 
Var data, result; 
for(var index = 0; index < json.feed.entry.Length; index++)1{ 
result = json.feed.entry[index]["medias$group"]; 
data = { 
thumbnail: result["megdqia$thumbnait"] [0]["uri"], 
videolink: result["mediag$content"][I0]["urt"] 
了 
postMessage(data) ; 
} 


最 后 ， 回 到 javascripts/application.js， 我 们 完成 onmessage() 事 件 处 理 程序 并 将 传 回 的 每 条 信 
县 添加 到 页 面 中 。 


where next/web workers/javascripts/application.js 


worker.onmessage = function(event)t{ 
Var img = $("<img>"); 
Var link = $("<a>"); 
Var result = event.data; 
Var wrapper ; 


tink.attr("href", result,.videolink); 
img.attr("src", result.thumbnail),; 
link.append(img); 
wrapper = link.wrap("<div>") .parent!(); 
$("#0output").append (wrapper), 

}; 


Vvvvvvvvvyv 


worker.onerror = function (event)t{ 
$("outpout").html("Why do you fail??"); 
1 
你 可 能 已 经 注意 到 了 Web Workers 的 API 工 作 方 式 跟 10. 2 全 讨论 的 Cross-Document Messaging 
API 很 相似 。 i 过 workers 获 取 一 条 信息 ， 然 后 啊 应 /处 理 这 条 信息 。 不 过 ， 低 于 了 正 10 的 正版 
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本 并 不 支持 Web Workers。 但 如 果 你 想 在 非 阻塞 客户 端 方 面 做 更 多 的 事情 ， 就 应 该 对 此 做 进一步 
的 探究 。 在 这 个 例子 中 , 我 们 还 可 以 进一步 检测 浏览 贷 的 Web Worker 文 持 程度 ， 如 果 浏 览 硕 不 文 
持 ， 则 可 以 考虑 结合 jQuery 调用 普通 JSONP 请 求 的 回 退 方案 。 


调试 workers 是 一 件 环 手 的 事情 。 由 于 我 们 无 法 访问 DOM， 也 无 法 使 用 consoLe .Log ( ) ， 
此 ， 要 调试 workers， 唯 一 的 选择 就 是 抛 出 一 个 异常 ， 或 者 通过 postMessage() 回 传 数据 ， 人 然后 
在 onmessage() 事 件 处 理 方法 中 将 信息 打印 出 来 。 这 些 方法 有 点 笨拙 ， 但 的 确 有 效 。 


对 于 那些 长 时 间 运 行 以 及 经 党 需要 CPU 密集 计算 ,但 又 不 希望 阻塞 用 户 界 面 主线 程 的 任务 ， 
Web Workers 无 疑 是 非常 好 的 方案 。 如 果 你 的 客户 端 在 使 用 过 程 中 时 出 现 卡 死 现象 ， 还 请 进一步 
探究 ， 并 考虑 是 否 采 用 Web Workers 方 案 。 


11.4 服务 希 发 送 事 件 


Web Sockets 技 术 很 酷 , 但 需要 一 个 不 同 的 协议 , 且 实 际 用 于 双 癌 通信 。 如 果 你 只 需要 从 服务 
伪 推 送 数 据 到 客户 端 ， 可 以 考虑 使 用 服务 器 发 送 事 件 ( Server-Sent Events，SSE )， 它 工作 于 普通 
的 既 有 HTTP 协 议 之 上 。 


为 了 演示 服务 硕 发 送 事件 ， 我 们 将 创建 一 个 非常 基本 的 页 面 ， 用 于 显示 来 目 服 务 端的 消息 。 
本 书 源 代码 中 提供 的 Web 服 务 表 已 经 文 持 服务 带 发 送 事 件 ， 因 此 ， 我 们 会 聚焦 于 客户 站 实现 。 按 
以 下 代码 创建 一 个 简单 的 HTML 页面 ， 并 预 留 一 个 用 于 显示 服务 端 推送 消息 的 位 置 : 


















































where next/html5_sse/index.html 
<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>AwesomeCo Messages</title> 
<link rel="stylesheet" href="stylesheets/style.css"> 
</head> 
<body> 
<h2>AwesomeCo Messages</h2> 
<div id="message">connecting....</div> 
<script src='javascripts/streamer.is'></script> 
</body> 
</html> 


此 外 ， 还 需要 创建 一 个 javascripts/streamer.js 文 件 ， 用 于 编写 JavaScript 代 码 ， 并 在 HTML 文 件 
中 加 载 它 : 


Where _ next/html5 sse/index.html 


<script src='Javascripts/streamer.1s'></script> 


接 下 来 ， 准 备 一 些 在 浏览 带 页 面 中 显示 的 数据 。 





11.4.1 监听 事件 


在 javascripts/streamer.js 文 件 里 创建 一 个 createMessageListeners() 方 法 , 其 定义 所 有 服务 
需 发 送 事件 的 事件 监听 需 ， 并 建立 到 服务 端 事件 流 的 连接 。 








where_next/html5_sse/javascripts/streamer.js 


Var createMessageListeners = function(){ 
Var messageSource = new EventSource("/stream"), 


} 

我 们 通过 EventSource 对 象 来 建立 到 事件 流 的 连接 。 有 赖 于 Web 浏 览 锅 ， 由 于 同 源 策略 的 限 
制 ， 这 个 源 可 能 需要 跟 Web 页 面 同 处 一 个 服务 做。 对 服务 着 发 送 事 件 的 路 域 资 源 共 吾 文 持 目前 尚 
未 普及 开 来 。 

createMessageListeners(); 

一 旦 我 们 建立 了 一 个 连接 , 服务 此 就 会 发 送 一 个 持续 的 消息 流 。 一 条 最 简单 的 样 例 消息 如 下 
所 未: 

data: We are bringing even more awesomeness to you! 

单词 data 之 后 跟着 一 个 由 号 ， 后 面 依次 跟 春 消息 文本 ， 以 及 一 个 空 行 一 一 这 不 仅仅 是 一 个 换 
行 符 ， 而 是 一 个 空 行 。 如 下 信息 : 


data: We are bringing even more awesomeness to you! 
data: Are you ready to be even more awesome? 


属于 香 条 消 肯 ,但 币 有 多 行内 容 。 而 下 面 的 样 例 消 屋 : 


data: We are bringing even more awesomeness to you! 














data: Are you ready to be even more awesome? 

则 被 当 作 两 条 独立 的 消息 。 你 可 以 发 送 纯 文本 ,或 者 构造 JSON 格 式 消息 ，JSON 格 式 消息 在 
客户 并 是 可 以 解析 的 。 协 议 非常 简单 ， 却 又 极其 强大 。 服 务 端 只 需 持 续 发 送 消 息 给 所 有 的 连接 客 
户 端 ， 直 到 发 送 停止 或 客户 端 断 开 连接 。 

要 获取 一 条 信息 ， 我 们 需要 响应 EventSource 对 象 的 message 事 件 ， 并 通过 event .data 获 
取消 息 ， 如 以 下 代码 所 示 : 














where_next/html5_sse/javascripts/streamer.js 


messageSource.addEventListener("message", function(event)}t{ 
document .getElementByld( "message").innerHIiML = event .data ; 
}, false); 





就 是 这 样 了 。 主 要 的 工作 在 于 创建 服务 端 代码 ， 以 及 一 旦 你 获取 了 消息 , 务必 想 清楚 该 如 何 
处 理 这 些 消 居 。 


你 还 可 以 监听 其 他 事件 ， 比 如 cLose 、open， 甚 至 你 自己 的 定制 事件 。 如 果 服 务 端 发 送 这 样 
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一 条 消息 : 


event : stockupdate 
data: {"stock": "MSFT", "value": "34.01"} 


此 时 在 客户 端 ， 你 应 该 监听 stockupdate 事 件 ， 而 不 是 message 事 件 ， 并 解析 出 数据 。 通 过 
从 服务 端 推送 消息 到 客户 端 ， 你 还 可 以 通知 客户 端 应 该 等 竺 多 长 时 间 再 重 试 : 

retry: 10000 

这 将 把 客户 端 请 求 过 程 的 等 待 时 间 由 原来 默认 的 3 秒 改 为 10 秒 。 

叮 以 通过 回 退 方案 在 不 支持 服务 右 发 送 事 件 的 老式 浏览 从 中 让 这 个 示例 程序 正常 运行 。 使 用 
Modernizt 来 检测 服务 如 发 送 事 件 的 支持 情况 , 并 在 不 文 持 的 情况 下 , 加 载 一 个 简单 的 EventSource 
polyfill 脚 本 2 回 退 方案 。 

















11.4.2 ”实现 你 自己 的 服务 器 


要 在 真实 环境 里 实现 服务 天 发 送 事件 , 需要 编写 发 送 持续 消 县 的 服务 端 代 码 ,， 消息 需 带 循 上 
述 格式 。 只 有 当 客 户 端 通过 以 下 头 部 格式 请 求 消息 时 ， 服 务 疹 才 会 发 送 消息 流 啊 应 给 客户 端 : 
Accept: textyevent -streanm 


之 后 服务 端 应 该 确保 设置 了 以 下 啊 应 头 部 格式 ， 以 表明 这 是 一 个 消息 流 啊 应 : 


Content-Type: text/event-stream;charset=UTF-8 
Cache-Control: no-cache 
Connection: keep-alive 


一 旦 设置 了 啊 应 ， 服 务 端 就 可 以 发 送 原始 消息 文本 给 所 有 的 连接 客户 端 。 当 然 ， 要 记得 移 除 
不 再 收听 消息 的 客户 端 。 

查看 本 书 源 代码 中 的 lib/sse.js 文 件 ， 你 会 发 现 这 还 只 是 一 个 很 人 蚀 陋 的 服务 大 实现 。 你 也 可 以 
在 node-sse 基础 上 自己 构建 一 个 服务 器 实现 ，node-sse 已 为 你 封装 了 大 量 复杂 细节 。 








11.5 ” 滤 镜 效果 


当 元 素 被 插入 到 文档 之 后 ， 就 可 以 采用 CSS 滤 镜 效 果 对 这 些 元 素 进行 一 些 图 像 操 作 。 我 们 
可 以 实现 蜗 斯 模糊 、 镜 面 反射 、 合 并 、 混 合 以 及 其 他 许多 图 像 特 效 ， 而 这 些 在 以 往常 第 需要 通过 
图 像 软件 来 实现 。 


滤 镜 效 来 的 规范 实现 还 有 很 长 的 路 要 走 ， 当 前 只 有 基于 WebKit 内 核 的 浏览 带 如 Chrome 和 











GD https://github.com/remy/polyfills/blob/master/EventSource.js 
@) http:/www.w3.org/TR/2013/WD-filter-effects-20130523/ 
(3) https://npmjs.org/package/sse 
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Safari 文 持 部 分 的 滤 镜 效 末 。 具 体 来 说 ， 可 以 在 WebKit 内 核 浏 览 硕 中 使 用 以 下 滤 镜 效 采 : 


口 blur() blur(10px); 通 过 设置 以 像 系 为 单位 的 模糊 值 大 小 ， 给 图 像 添 加 模糊 效果 。 

口 grayscale() grayscale(0.5); 通 过 设置 0~1 范 围 内 的 值 ， 从 图 像 上 删除 色彩 ， 其 中 0 为 
全 彩 ，1 为 全 灰 图 像 。 也 可 以 设置 百分比 的 值 。 

口 drop-shadow() drop-shadow(5px 5px 5px #333); 给 图 像 设置 阴影 ， 处 理 方式 与 
box-shadow 类 似 。 

口 sepia() sepia(0.5) ;通过 设置 0~1 范 围 内 的 值 ， 创 建 泛 黄 旧 相片 效果 ，0 为 正常 ，!1 为 完 
全 棕 褐色 。 也 可 以 设置 百分比 的 值 。 

Dbrightness() brightness(1.0); 调 整 元 素 色 彩 的 有 党 度 。0 为 完全 暗色 ，1 为 正常 ，10 
为 最 大 亮度 。 我 们 也 可 以 设置 百分比 的 值 ， 其 中 100% 为 正常 。 

口 contrast() contrast(1.0); 调 整 元 泰 色彩 的 对 比 度 ， 或 者 明暗 度 的 差 值 。0 为 无 对 比 
度 ，1 为 正常 ，10 为 最 大 对 比 度 。 我 们 也 可 以 设置 百分比 的 值 ， 其 中 100% 为 正常 ,任何 大 
于 100% 的 值 都 会 导致 更 大 的 对 比 度 。 

口 hue-rotate() hue-rotate(90deg); 通 过 角度 或 缴 度 ,如 同 在 色 轮 上 对 元 系 进 行 色 相 
旋转 。 

D saturate() saturate(0.5) ;通过 设置 0~1 范 围 内 的 值 ， 控 制 饱 和 度 ， 或 者 图 像 色彩 的 
鲜艳 程度 ， 其 中 0 为 无 饱和 度 ，10 为 最 大 饱和 度 。 也 可 以 设置 百分比 的 值 。 

D invert() invert(1); 反 转 色 彩 ， 创 建 反 转 色 效果 。 使 用 0~1 或 0%~100% 范 围 内 的 值 来 
设置 效果 。 中 间 值 为 灰色 图 像 效 果 。 

口 opacity() opacity(1) ;设置 元 素 的 透明 效果 ， 以 识别 其 后 面 的 元 素 或 色彩 。 使 用 0~1 
或 0%~100% 范 围 内 的 信 来 设置 效 末 ， 其 中 0 为 完全 透明 ，1 为 完全 不 透明 。 


对 于 这 些 属性 ， 最 美妙 的 应 用 真 过 于 跟 过 渡 和 动画 效果 的 结合 使 用 。 例 如 ， 如 末 我 们 和 希望 鼠 
标 未 芒 集 在 页 面 图 像 之 上 时 ， 图 像 是 灰色 的 ， 只 需要 设置 一 点 点 CSS 样 式 即 可 。 























where_next/filters/stylesheets/style.css 

img.photot{ 
-webkit-filter: grayscale(1); 
-webkit-transition: -webkit-filter 0.5s linear; 


} 


img .photo:hovert{ 
-webkit-filter: none; 


} 

这 比 创建 不 同 的 图 像 文件 , 并 通过 JavaScript 或 CSS 背 景 图 像 来 实现 图 像 交 蔡 的 方式 简单 得 多 。 

当然 ,这些 属性 尚未 得 到 所 有 浏览 带 的 支持 ， 尽管 可 以 通过 菏 些 方式 来 让 它们 运行 起 来 ， 
目前 最 好 先 不 要 使 用 它们 ， 如 果 打 算 使 用 它们 ， 也 务必 要 考虑 好 回 退 方案 。 一旦 滤 镜 效果 获得 
了 稳定 支持 ,并 且 能 够 在 其 他 浏览 器 中 实现 ,你 就 可 以 在 需要 的 情景 中 使 用 它们 。 但 跟 所 有 的 
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可 视 效果 一 样 ， 要 把 握 好 使 用 的 度 。 切 勿 用 扎堆 的 滤 镜 效果 “ 撑 饱 ”你 的 页 面 ， 从 而 导致 内 容 
的 偏离。 


11.6 WebGL 


我 们 已 经 在 前 面 讨论 过 了 <canvas> 标 签 的 2D 上 下 文 , 但 还 有 一 个 演进 中 的 规范 用 来 描述 3D 
对 象 的 使 用 方式 。WebGL 规 范 虽 然 不 是 HTML5 的 一 部 分 ， 但 Apple 、Google 、Opera 和 Mozilla 是 
这 个 规范 工作 组 的 成 员 ， 并 在 各 自 的 浏览 絮 中 实现 了 一 些 WebGL 支 持 。™ 


3D 图 形 的 实现 已 经 超出 了 本 书 的 范围 ， 如 果 你 对 此 感 兴趣 ， 可 以 关注 一 个 学 习 WebGL 的 网 
站 : Learning WebGL”， 该 网 站 提供 了 一 些 很 好 的 样 例 和 教程 。 








11.7 前进! 


作为 开发 者 , 现在 可 以 说 恰 首 其 时 ， 因 为 这 是 令 人 激动 的 新 拉 术 时 代 ! 本 书 对 未 来 技术 趋势 
的 阐述 仅 是 皮毛 。 规 郊 如 此 丰 喇 ,希望 你 能 继续 深入 探究 。 随 痢 时 间 的 推移 ， 规 交会 不 断 演进 与 
完善 ,浏览 带 能 力也 将 不 断 增强 ， 而 在 开发 之 路 上 也 将 出 现 更 多 的 选择 。 希望 你 充分 利用 本 书 的 
内 容 ， 如 同 你 现在 所 做 的 那样 ， 不 断 答 试 新 技术 、 持 续 探 索 并 关注 各 种 规范 的 演进 。 

现在 ， 去 实现 目 己 的 技术 之 梦 吧 ! 














GD http:/www.khronos.org/registry/webgl/specs/latest/ 
@) http://learningwebgl.com/blog/ 
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在 以 下 内 容 中 , 浏览 融 文 持 情 况 在 小 括号 内 用 浏览 硕 名 称 简写 查 方式 以 及 所 文 持 的 最 低 版 本 
号 来 表示 。 人 简写 但 含义 为 C: Chrome; F: Firefox; S: Safari; IE: Internet Explorer; O: Opera; 
iOS: 市 Safari 的 iO0S 设 备 ， 以 及 A: Android 浏 览 禹 。 





A.1 新 元 素 
人 参考 2.1 他 ， 


口 <header>: 定义 页 面 或 区 块 的 页 眉 区 域 (C5、F3.6、S4、IE8、0O 10 )。 

口 <footer>: 定义 页 面 或 区 块 的 页 脚 (CS、F3.6、S4、IE8、O 10 )。 

口 <nav>: 定义 页 面 或 区 块 的 导航 条 (C5、F3.6、S4、IE8、0O 10)。 

口 <section>: 区 块 ， 定 义 页面 或 内 容 分 组 的 逻辑 区 域 (C5、F3.6、S4、IE8、0O 10 )。 
口 <articte>: 定义 文章 或 完整 的 一 块 内 容 (C5、F3.6、S4、IE8、0O 10)。 

口 <aside>: 定义 次 要 或 相关 性 内 容 (C5、F3.6、S4、IE8、0O10)。 


其 他 元 系 : 


口 定义 列表 : 定义 名 字 与 对 应 值 ， 如 定义 项 与 描述 内 容 (所 有 浏览 器 )， 参 考 2.4 节 。 
口 <meter>: 描述 一 个 数量 范围 (C8、F 16、S 6、0O 11 )， 参 考 2.2 节 。 


口 <progress>: 通过 设置 进度 条 ， 显 示 实 时 进度 情况 (C8、F6、S 6、IE 10、O 11), 参 
考 2.2 节 。 























A.2 属性 


口 日 定义 数据 属性 : 通过 data- 柑 式 ， 人 允许 给 元 素 添加 目 定 义 属 性 (所 有 的 浏览 融 都 文 持 通 
过 JavaS cript 的 getA ttribute() 方 法 谈 取 这 些 目 定 义 属 性 )， 参 考 2.3 市 。 

口 就 地 编辑 功能 ( <p contenteditable>lorem ipsum</p> ): 在 浏览 器 中 提供 内 容 的 就 
地 编辑 功能 (C4、F3.5、S3.2、 下 6、0 10.1、iO S5、A 3 )， 参 考 3.5 节 。 
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A.3 表单 字段 
参考 3.1 廊 . 


口 电子 邮件 字段 (<input type="email"> ): 呈现 一 个 用 于 输入 电子 邮件 地 址 的 表单 字段 
(O10.1、 iOS、 A3), 

口 URL 字 段 (<input type="urt"> ): 呈现 一 个 用 于 输入 URL 的 表单 字段 (OO 10.1、iOS 5、 
3) 

口 范围 (滑动 条 ) 字段 (<input type="range"> ): 呈现 一 个 滑动 条 控件 (C5、S 4、F23、 
IE 10、O 10.1 )。 

口 数值 字段 ( <input type="number"> ): 呈现 一 个 用 于 输入 数值 的 表单 字段 ， 常 显示 为 数 
值 枉 (CS、S5、O 10.1、iOSS、A3)。 

口 颜色 选择 字段 (<input type="color"> ): 呈现 一 个 用 于 指定 颜色 的 表单 字段 (CS、O 11 )。 

口 日 期 选择 字段 (<input type="date"> ): 呈现 一 个 用 于 选择 日 期 的 表单 字段 , 文 持 日 期 、 
月 份 或 星期 等 选项 (C5、S 5、O 10.1 )。 

口 日 期 /时 间 选 择 字段 ( <input type="datetime"> ): 呈现 一 个 用 于 选择 日 期 及 时 间 的 表 
单字 段 ， 文 持 日 期 时 间 、 本 地 日 期 时 间或 时 间 等 多 种 选项 (SS、O 10.1 )。 

口 搜索 字段 ( <input type="search"> ): 呈现 一 个 用 于 输入 搜索 关键 字 的 表单 字段 ( C5、 
S4、O 10.1 、ioOgS )。 



































A.4 ”表单 字段 属性 

口 自动 聚焦 功能 ( <input type="text" autofocus> ): 支持 将 焦点 放置 在 指定 元 素 上 (C5、 
S 4 )， 参 考 3.2 市 。 

口 占 位 文本 功能 ( <input type="email" placeholder="me@example.com"> ): 支持 在 
表单 字段 中 呈现 占 位 文本 (C5、F 4、S 4 )， 参 考 3.3 市 。 

口 必 填 字段 ( <input type="email" required> ): 如 果 指 定 字 段 未 填 人 值 ， 则 不 允许 提 
交 页 面 (C23、F 16、IE 10、0O 12 )， 参 考 3.4 节 。 

口 正则 表达 式 验 证 功能 (<input pattern="/^(\Xsk|N\d+)$/"> ): 如 果 字 段 内 容 不 匹配 指 
定 模 式 ， 则 不 允许 提交 页 面 , (C23、F 16、IE 10、0O 12 )， 参 考 3.4 节 。 




















A.5 可 访问 性 


口 role 属 性 (<div role="document"> ): 回 屏 幕 阅读 需 标 明基 个 元 素 的 作用 (C3、F3.6、 
S4、]I8、0 9.6 )， 参 考 $.1 节 。 

口 aria-live (<div aria-Live="poLite"> ): 标识 一 块 自 动 更 新 的 区 域 ， 如 Ajax 请 求 
(F 3.6 ( Windows )、S 4、IE 8 )， 参考 5.2 节 。 
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Daria-atomic (<div aria-live="polite" aria-atomic="true"> ): 标识 活动 区 域 的 
整个 内 容 可 读 还 是 只 有 更 新 的 元 素 可 读 (F 3.6 ( Windows )、S 4、IE 8 )， 参 考 $.2 节 。 

口 <scope> (<th scope="col">Time</th> ): 将 表 头 与 表格 的 列 或 行 关联 起 来 (所 有 浏览 
般 )， 参 考 5.3 市 。 

口 <caption> (<caption>This is a caption</caption> ): 创建 表格 标题 (所 有 浏览 器 )， 
参考 5.3 节 。 

Daria-describedby ( <table aria-describedby="summary"> ): 将 一 段 描 述 关 联 到 某 
个 元 素 (F 3.6 ( Windows )、S 4、IE 8 )， 参 考 5.3 市 。 























A.6 多 媒体 


D <canvas> (<canvas><p>A lternative content</p></canvas> ): 支持 通过 JavaS cript 
创建 位 图 (C4、F3、S 3.2、IE 9、0O 10.1、1iOS 3.2、A 2 ), 参考 6.1 节 ，。 

口 <svg> (<svg><!-- XML content --></svg> ): 支持 通过 XML 创 建 拓 量 图 (C4、F 3、 
S 3.2、IE 9、0O 10.1、iOS 3.2、A 2 )， 参 考 6.3 节 。 

口 <audio>( <audio src="drums .mp3"></audio> ): 浏览 器 原生 支持 的 音频 播放 功能 ( C4、 
F3.6、S3.2、IE9、0O 10.1、iOS 3、A 2 )， 参 考 7.3 节 。 

口 <video> ( <video src="tutorial.m4v"></video> ): 浏览 器 原生 支持 的 视频 播放 功能 
(C4、F3.6、S3.2、IE9、0O 10.5、iOS 3、A 2 )， 参 考 7.4 节 。 




















A./ CSS3 


D :nth-of-type (p:nth-of-type(2n+1){color: red;}): 找 出 某 种 类 型 的 所 有 7 个 元 素 
(C2、F3.5、S3、IE9、0O 9.5、iOS 3、A 2 )， 参 考 4.1 节 。 

D :first-child (p:first-child{cotlor:blue;}): 找 出 第 一 个 元 素 (C2、F 3.5、S 3、 
IE 9、O 9.5、iOS 3、A 2 )， 参 考 4.1 节 。 

D :nth-child (p:nth-child(2n+1){color: red;}): 顺序 计数 ， 找 出 特定 的 一 个 子 元 
素 (C2、F3.5、S3、IE 9、0O 9.5、iOS 3、A 2 )， 参考 4.1 节 。 

口 :last-child(p:last-child{color:blue;}): 找 出 最 后 一 个 子 元 素 (C2、F3.5、S3、 
IE 9、O 9.5、iOS 3、A 2 )， 参 考 4.1 节 。 

口 :nth-last-child (p:nth-last-child(2){color: red;} ): 向 前 计数 ， 找 出 特定 的 
一 个 子 元 素 (C2、F3.5、S3、IE 9、0O 9.5、iOS 3、A 2 )， 参 考 4.1 节 。 

口 :first-of-type(p:first-of-type{color:blue;}): 找 出 给 定 类 型 的 第 一 个 元 素 ( C2、 
F3.5、S3、IE9、0O 9.5、iOS 3、A 2 )， 参 考 4.1 节 。 

D :last-of-type(p:last-of-type{color:blue;}): 找 出 给 定 类 型 的 最 后 一 个 元 素 (C2、 
F3.5、S3、IE9、0O 9.5、iOS 3、A 2 )， 参 考 4.1 节 。 
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口 分 栏 特性 (#content{ column-count: 2; column-gap: 20px; column-rule: 1px 
solid #ddccb5;} ): 将 内 容 分 割 到 多 个 列 中 (C2、F3.5、S3、O11.1、iOS3、A2)， 
参考 4.4 节 。 

Di:after (span.weight:after { content: "Lbs"; color: #bbb; } ): 使 用 content 
在 特定 元 素 后 面 插入 内 容 (C2、F3.5、S3、I8、0O 9.5、iOS 3、A 2 )， 参 考 4.2 节 。 

口 媒体 查询 特性 (media="only all and (max-width: 480)" ): 基于 设备 设 定 ， 应 用 样 
式 (C3、F3.5、S4、IE9、0O 10.1、iOS 3、A 2 )， 参 考 4.3 方 。 

口 border-radius (border-radius: 10px; ): 给 元 素 设置 融 角 (C4、F3、S 3.2、IE9、 
O 10.5 )， 参 考 8.1。 

口 RGBa 文 持 ( background-color: rgba(255,0,0,0.5); ): 使 用 RGB 颜色 设置 值 蔡 代 
十 六 进 制 颜色 设置 值 ， 并 带 有 透明 度 设 置 值 (C 4、F 3.5、S 3.2、IE 9、O 10.1 )， 人 参考 
8.2 节 。 

口 box-shadow (box-shadow: 10px 10px 5px #333; ): 设置 元 素 的 阴影 效果 (C3、F3.5、 
S 3.2、IE 9、0O 10.5 )， 参 考 8.2 节 。 

口 旋转 (transform: rotate(7.5deg); ): 旋转 元 素 (C3、F3.5、S3.2、IE9、0O 10.5 )， 
参考 8.2 节 。 

口 渐 变 (Linear -gradient(top，#fff，#efefef); ): 创建 渐变 效果 图 像 (C4、F 3.5、 
S 4 )， 参 考 8.2 节 。 

口 src: url (http://exampte.com/awesomeco.ttf ): 人 允许 通过 CSS 使 用 特定 字体 ( C4、 
F3.5、S 3.2、IE 5、O 10.1 )， 参 考 8.3 节 。 

口 过 渡 (transition: background 0.3s ease ): 延 时 间 轴 逐渐 将 一 个 CSS 属 性 又 一 个 值 
过 渡 到 另 一 个 值 (C4、F 3.5、S 4、I 10 )， 人 参考 8.4 节 。 

口 动画 (animation: shake 0.5s 1; ): 使 用 定义 好 的 关键 帧 动画 ， 沿 时 间 轴 逐渐 将 一 个 
CSS 属 性 又 一 个 值 过 渡 到 另 一 个 值 (C4、F 3.5、S 4、IE 10 )， 参 考 8.4 节 。 

DCSS 滤 镜 殖 有 末 ( filter: blur(10px) ): 给 元 素 应 用 模糊 、 灰 度 、 旧 色调 、 阴 影 以 及 其 
他 效果 (C18、S 6、O 15、iOS 6 )， 参 考 11.5 节 。 

口 弹性 盒子 模型 : 使 用 CSS 创 建 更 好 的 布局 (C26、F22、S 4、O 10.6 )， 参 考 11.1T。 












































A.8 客户 端 数 据 存 储 


口 localSs torage: 以 键 / 值 对 方式 存储 数据 ， 绑 定 到 某 个 域 ， 并 存储 跨 浏 览 絮 会 话 数 据 
(C5、F3.5、S4、IE 8、0O 10.5、iOS 3.2、A 2.1 )， 参考 9.1 节 。 

口 sessionS torage: 以 键 / 值 对 方式 存储 数据 ， 绑 定 到 某 个 域 ， 当 浏览 融会 话 结束 时 数据 
将 被 删除 (C5、F 3.5、S 4、IE 8、0O 10.5、1iOS 3.2、A 2.1 )， 人 参考 9.1 节 。 

口 IndexedDB: 通过 一 个 浏览 需 内 建 对 象 存储 需 (在 mdexedDB 中 称 为 object store， 也 就 是 通 
第 童 义 上 的 数据 表 )， 存 储 跨 会 话 数据 (C 25、F 10、IE 10 )， 参 考 9.2 市 。 
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口 Web S QL Databases: 一 个 完整 的 关系 型 数据 库 ， 文 持 创 建 表 、 插 和 人、 更 新 、 删 除 、 查 询 
等 操作 ， 并 支持 事务 。 绑 定 到 某 个 域 ， 存储 跨 会 话 数据 。 但 已 不 再 是 活动 的 规范 了 ( C5、 
S 3.2、0O 10.$、iOS 3.2、A 2 )， 参 考 9.2 节 最 后 部 分 的 描述 。 











A.9 其 他 API 


口 离线 Web 应 用 : 定义 离线 使 用 的 缓存 文件 ， 人 允许 应 用 在 离线 状态 下 运行 4(C4、F3.5、S4、 
O 10.6、iOS 3.2、A 2 )， 参 考 9.3 节 。 

D History: 管理 浏览 器 历史 记录 (C5、F3、S4、IE8、0O10.1、iOS 3.2、A2 )， 参 考 10.1 节 。 

口 Cross-Document Messaging: 在 跟 域 的 内 容 窗 口 或 <iframe> 间 传递 消 上 朋 (C5、F4、S 5、 
iOS 4.1、A 2 )， 参 考 10.2 市 。 

口 Web Sockets: 在 浏览 需 与 服务 顺 之 间 创 建 一 个 有 状态 链接 (CS、F6、S$SS、IE10、O 12.1、 
iOS 6 )， 参 考 10.3 市 。 

口 Geolocation: 从 客户 端 浏览 硕 获 取经 纬度 (C5、F3.5、S5、0O 10.6、iOS 3.2、A 2.1 )， 
参考 10.4 节 。 

口 Drag and Drop: 提供 拖 放 交 互 功能 (C4、F 3.5、S 3.1 、IE 6: 部 分 支持 、IE 10: 完全 支 
持 、O 12 )， 参 考 10.5 市 。 

口 跨 域 资源 共享 ( Cross-O rigin Resource S haring, CO RS ): 实现 跨 域 Ajax 请 求 (C4、F3.5、 
S4、IE 10、0O 12.0、iOS 3.2、A 2.1 )， 参考 11.2 节 。 

口 Web Worker: 在 后 台 线 程 中 人 处理 密集 或 长 时 间 运 行 的 任务 (C4、F3.5、S4、IE10、 O12.1、 
iOS 5、A 2.1 )， 参考 11.3 节 。 

口 服务 需 发 送 事件 : 把 信息 从 服务 器 单 品 推送 到 连接 客户 端 (C6、F6、S5、O11、1iOS4)， 
参考 11.4 节 。 

口 WebGL 的 3D-canvas 支 持 ": 在 画布 上 创建 3D 对 象 (C8、F4、S 5.1、0O 12 )， 参 考 11.6 节 。 

















J 默认 或 许 不 可 用 ， 或 者 需要 最 新 视频 驱动 程序 的 文 持 才能 正常 工作 。 
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一 个 干净 、 简 洛 而 且 能 够 鉴 浏 览 锅 工作 的 JavaScript 程 序 ， 写 起 来 是 一 件 困 难 而 繁琐 的 事情 。 
为 了 让 降低 编码 难度 , 许多 JavaScript 库 应 运 而 生 , 而 jQuery 无 疑 是 其 中 最 受 欢 迎 的 。 它 易于 使 用 ， 
拥有 广泛 的 插件 支持 ， 非 常 适合 用 于 创建 回 退 方案 和 复杂 的 Web 应 用 。 


本 附录 内 容 将 介绍 本 书 用 到 的 一 些 jQuery 开 发 知识 。 但 这 些 内 容 并 不 足以 蕉 代 优秀 的 jQuery 
文档 ”， 同 时 也 并 未 详尽 描述 jQuery 的 特性 和 方法 ， 却 能 帮助 不 了 解 jQuery 的 开发 者 迅速 人 门 。 


jQuery 极 大 侧 化 了 DOM 操 作 及 事件 处 理 。 它 通过 CSS 选 择 硕 定位 元 素 ,， 并 将 这 些 元 系 封 净 在 
特定 JavaScript 对 象 中 ,然后 ， 开 发 者 就 可 以 更 改元 了 或 者 给 元 条 添加 事件 监 昕 大 。jQuery 能 够 处 
理 的 任何 工作 , 都 可 以 用 既 有 的 JavaScript 代 码 来 完成 , 但 jQuery 的 优势 在 于 能 够 很 好 地 解决 跨 浏 
览 需 文 持 的 问题 ， 并 统一 语法 。 









































B.1 加 载 jQuery 


可 以 从 jQuery 网 站 上 下 载 并 获取 jQuery 库 ， 然 后 直接 在 网 页 中 加 载 jQuery”， 但 在 这 里 ， 我 们 
通过 Google 服 务 硕 来 加 载 jQuery， 如 以 下 代码 所 示 : 





jqueryprimer/simple_selection.html 
<script 
src="http://ajax.googleapis .com/ajax/libs/jquery/1.9.1/jquery.min.]Js"> 

</script> 

浏览 希 可 以 实现 每 次 只 发 起 少量 的 连接 请 求 到 一 个 服务 融 。 如 采 我 们 将 图 片 和 脚本 分 发 到 多 
个 服务 天 ， 用 户 就 能 够 更 快速 地 下 载 页 面 。 采 用 Google CDN 方 式 还 有 一 个 额外 的 好 处 ， 由 于 其 
他 站 点 也 同时 连接 到 Google 服 务 硕 上 的 jQuery 库 ， 因 此 ， 用 户 可 能 已 经 在 他 们 的 训 览 硕 中 缓存 了 
jQuery。 你 可 能 已 经 知道 ,浏览 病 通 过 文件 的 完整 URL 来 判断 其 是 否 已 被 缓 仔 。 如 东 你 计划 在 无 














GD http://docs.jquery.com 
@) http://www.jquery.com 
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互联 网 接 入 的 设备 上 使 用 jQuery， 束 应 该 选择 在 本 地 加 载 jQuery 的 方式 。 


B.2 jQuery 基本 要 素 


一 旦 你 在 页 面 中 加 载 了 jQuery 库 , 卫 可 以 开始 进行 元 素 操作 了 .jQuery 有 一 个 jQuery () 郴 数 ， 
可 以 通过 CSS 选 择 带 来 获取 元 素 并 将 对 应 元 素 封 效 到 jQuery 对 乏 中 ， 这 样 ， 我 们 就 可 以 操作 这 些 
元 素 了 。 

jQuery() 畏 数 有 一 个 对 应 的 简写 形式 : $();， 这 也 是 本 书 所 使 用 的 形式 。 全 书 以 “jQuery 
阴 数 ”来 描述 它 。 

例如 ， 如 末 你 希望 找 出 页 面 中 的 <h1> 元 系 ， 可 以 这 人 么 做 : 











jqueryprimer/simple_selection.html 

$("h1"); 

如 果 希 望 找 出 页 面 中 所 有 的 <h1> 元 素 , 也 可 以 使 用 上 述 方式 。 如 果 你 要 找 出 带 有 important 
类 的 所 有 元 素 ， 可 以 这 么 做 : 





jqueryprimer/simple_selection.html 

$(".important"); 

回顾 一 下 。 该 行 代码 与 前 面 一 行 示例 代码 的 唯一 区 别 在 于 所 使 用 的 CSS 选 择 喜 不 同 。 如 果 这 
时 候 我 们 想 找 出 id 为 header 的 元 素 ， 只 需 这 样 : 

Var header = $("#heaader” ) ; 

如 有 果 想 找 出 侧 边栏 中 的 所 有 链接 ， 又 该 如 何 处 理 呢 ? 这 时 ， 只 需 使 用 合适 的 选择 融 即 可 ， 例 
如 : $("#sidebar a")。 

jQuery 抑 数 返回 一 个 jQuery 对 象 ， 这 是 一 个 特殊 的 JavaScript 对 象 ， 包 含 了 一 个 匹配 选择 磊 而 
多 选 出 来 的 DOM 元 素 的 数组 。 这 个 对 象 具 有 许多 预先 定义 的 方法 ， 可 以 用 来 操作 所 选 元 北 。 我 
们 来 具体 了 解 一 下 其 中 几 个 方法 。 














B.3 ”修改 内 容 的 方法 
在 本 书 示例 项 目的 实践 中 ， 我 们 会 使 用 几 个 jQuery 方法 来 修改 页 面 的 HTML 内容 。 


B.3.1 hide()、show() 和 toggle() 万 法 





有 了 hide() 和 show() 方 法 ， 隐 藏 和 显示 用 户 界面 元 素 的 操作 就 变 得 简单 许多 。 可 以 隐藏 一 
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jqueryprimer/simple_selection.html 

$("h1").hidel(),; 

全 书 中 ， 我 们 使 用 hide() 方 法 来 隐藏 只 有 在 禁用 JavaScript 情 况 下 才 会 显示 的 页 面 区 块 ， 如 
文字 称 及 其 他 一 些 回 退 内 容 。 要 显示 元 素 ， 只 需 简 单调 用 相反 的 show( ) 方 法 。 我 们 还 可 以 通过 
toggle() 方 法 来 轻松 切换 元 系 的 可 见 性 。 

如 末 jQuery 函 数 找到 了 匹配 选择 带 的 元 系 项 ， 所 有 的 这 些 元 素 都 会 被 显示 、 隐 藏 ， 或 者 切 
换 可 见 性 。 因此, 上 面 的 这 行 代码 并 非 仅 仅 隐 藏 员 面 中 第 一 个 <h1> 元 素 ,， 而 是 隐藏 所 有 的 <h1> 
元 素 ! 

如 有 末 要 隐藏 侧 边栏 中 的 所 有 链接 ， 可 以 这 人 么 做 : 























jqueryprimer/simple_selection.html 


$("#sidebar a").hidet(). 


B.3.2 html()、val() 和 attr() 方 法 
我 们 通过 html ( ) 方 法 来 获取 并 设置 特定 元 系 的 内 容 。 


jqueryprimer/methods.html 


$("#message").html("Hello Wortdi"); 

在 这 里 ， 我 们 在 <h1> 开 闭 标签 之 间 设 置 了 “Hello World!” 的 内 容 。 

val() 方 法 用 来 获取 和 设置 表单 字段 的 值 ， 工 作 方 式 与 html () 方 法 完全 相同 。 
attr() 方 法 用 来 获取 和 设置 元 素 属 性 。 


B.3.3 append()、prepend() 和 wrap() 方 法 


append () 方 法 在 一 个 已 有 元 系 后 谎 加 一 个 新 的 子 元 素 。 假 设 我 们 有 一 个 如 下 所 示 的 简单 表单 
以 及 一 个 空 的 无 序列 表 : 








jqueryprimer/methods.html 

<form 1id="task form"> 
<label for="task">Task</label> 
<input type="text" id="task" > 
<input type="submit" value="Add"> 

</form> 

<UL id="tasks"> 

</ul> 
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可 以 在 提交 表单 时 ， 通 过 追加 新 元 素 的 方式 来 创建 列表 中 的 元 素 。 


jqueryprimer/methods.html 


$(function(){ 
$("#task form").submit(function(event)}){ 
event.preventDefault(),; 
Var new element = ${("<Ll1i>" + $("#task") .val() + "</{1i>"), 
$("#tasks").append(new element); 
I 
1 


prepend () 方 法 跟 append () 方 法 的 工作 方式 是 一 样 的 ,只 不 过 prepend ( ) 方 法 在 已 有 元 素 之 
前 添加 新 元 素 。wrap ( ) 方 法 封装 指定 jQuery 对 象 里 的 所 选 元 素 。 








jqueryprimer/methods.html 


Var wrapper = $("#message") .wrap("<div cilass='wrapper'></div>") .parent'(); 


在 本 书 中 ,我们 使 用 这 些 技 术 以 编程 方式 创建 了 一 些 复杂 结构 。 








B.3.4 CSS 和 类 
可 以 使 用 css () 方 法 来 定义 元 素 样式 ， 如 以 下 代码 所 示 : 


jqueryprimer/methods.html 

${"Label").css("color", "#f00"), 

我 们 可 以 分 次 给 元 对 定义 样式 ， 也 可 以 通过 JavaScript 的 散 列 结构 一 次 性 地 给 元 系 分 配 多 个 
CSS 规 则 : 


jqueryprimer/methods.html 
$("hi").css( {"color"” :; "red'", 
"text-decoration" : "undgerline"} 
) 
然而 ,混用 样式 和 JavaScript 代 人 码 终究 不 是 一 个 好 方式 。 我 们 可 以 使 用 jQuery 的 addClass() 
和 removeCLass ( ) 方 法 在 某 个 事件 发 生 时 诬 加 或 移 除 样式 类 。 同 时 , 需 将 样式 类 与 样式 关联 起 来 。 
比如 ， 可 以 结合 jQuery 事件 和 样式 类 ， 在 表单 字段 获取 或 失去 焦点 时 改变 表单 字段 背景 色 : 





























jqueryprimer/methods.html 
$("input").focus(function(event)t{ 
$(this).addClass("focused"); 
I 
$("input").blur(function(event)t{ 
$(this).removeClass("focused"); 


六 
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这 个 例子 非常 简单 ， 并 可 以 用 CSS3 中 的 :focus 伪 类 来 替代 实现 ， 但 某 些 浏览 器 并 不 支持 这 
个 伪 类 。 
B.3.5 ”jQuery 链 式 操作 


jQuery 对 和 象 方法 返回 的 也 是 jQuery 对 象 ， 这 就 意味 着 我 们 可 以 将 各 种 jQuery 方法 无 限制 地 以 
方法 链 的 方式 连接 在 一 起 ， 如 以 下 代码 所 示 : 





jqueryprimer/simple_selection.html 


$("h2").addClass("hidden").removeClass{("visible"); 
注意 不 要 混用 这 种 方式 ， 否 则 会 让 代码 星 深 难 异 。 
B.4 创建 和 移 除 元 素 


我 们 需要 时 不 时 创建 新 的 HITML 元 素 ， 以 将 其 搬入 到 文档 中 。 可 以 使 用 jQuery 本 数 来 创建 元 
系 。 当 新 元 系 需 要 添加 事件 或 其 他 行为 时 ， 这 个 方法 尤其 有 效 。 








jqueryprimer/create_elements.html 


Var input = $("input"), 





虽然 可 以 通过 document .createELement("input'") ;来 完成 这 个 工作 ， 但 如 果 使 用 jQuery 
函数 的 话 ， 就 可 以 更 轻松 地 调用 更 多 的 方法 来 完成 。 





jqueryprimer/create_elements.html 
Var element = $("<p>Hello World</p>"); 
element,.css("color", "#f00").insertAfter("#header"); 


这 是 通过 jQuery 链 式 操作 来 帮助 我 们 快速 创建 并 处 理 结构 的 男 一 个 例子 。 


我 们 往往 还 需要 从 DOM 中 移 除 元 系 。 通过 使 用 Query 函 数 来 选 定 元 系 , 可 以 轻易 地 移 除 其 所 
有 的 子 元 系 : 





jqueryprimer/remove_elements.html 


$("#animats").empty'().,; 


或 者 移 除 元 系 日 身 : 


jqueryprimer/remove_elements.html 


$("#animals")}) .removel(); 


开发 动态 Web 应 用 程序 时 ， 这 些 特 性 会 给 你 市 来 极 大 便利 。 
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B.5 事件 


当 用 户 跟 页 面 发 生 交 互 时 , 我 们 时 第 需要 触发 各 种 事件 , jQuery 使 得 这 些 操作 变 得 非常 容易 。 
在 jQuery 里 ， 许 多 常用 事件 都 封 演 成 了 Query 对 象 上 的 一 个 方法 ， 触 发 事件 时 只 需要 调用 该 方法 
印 可 。 例 如 ， 我 们 可 以 让 页 面 上 带 有 popup 类 的 所 有 链接 在 新 窗口 中 打开 ， 代 码 如 下 所 示 。 

















jqueryprimer/popup.html 
Line1 Var links = $("a.popup"); 
2 links.click(function(event)t 
3 var address = $(this).attr('href'); 
4 event .preventDefault(); 
5 window.open(address); 


0 


在 我 们 的 jQuery 事件 处 理 方法 中 ， 可 以 通过 this 关 键 字 访 问 所 要 操作 的 元 素 。 在 第 3 行 ， 传 
入 this 给 jQuery 函数 ， 以 调用 jQuery 函数 返回 对 象 的 attr() 方 法 来 快速 获取 链接 的 日 标 地 址 。 


使 用 preventDefautLt ( ) 函数 来 阻止 原始 事件 的 触发 ， 这 样 就 不 会 干扰 到 相关 操作 。 











B.5.1 事件 绑 定 


某 些 事件 在 jQuery 中 没有 对 应 的 快捷 方式 ， 因 此 ， 可 以 使 用 on( ) 方 法 来 处 理 这 些 事 件 。 比 
如 ， 实 现 HTMLS 规 范 中 的 拖 放 功能 时 ， 需 要 取消 ondragover 事 件 ， 因 此 ， 按 照 以 下 方式 使 用 
on () 方 法 : 


jqueryprimer/events.html 
target = $("#droparea") 
target.on('dragover', function(event) { 
event.preventDefault'()}); 
return false; 


}); 
请 注意 ， 我 们 去 掉 了 监听 事件 (ondragover 事 件 ) 的 on 前 级 。 





B.5.2 ”进一步 的 事件 绑 定 操作 


为 每 一 个 元 素 添 加 cLick 事 件 通 利 会 导致 页 面 深 染 速度 变 得 更 慢 ， 并 且 比 正常 情况 下 消耗 更 
多 资源 .尽量 避 人 名 为 单个 元 系 添 加 事件 ,我们 可 以 通过 监听 这 些 元 系 的 容 带 元 系 事 件 来 达到 目的 。 

















jqueryprimer/events.html 
Line1 Var Links = $("#Links"); 
2 links.click(function(event)t 
3 link = event.target, 
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4 var address = $(link).attr('href'); 
5 event .preventDefautLt () ; 
6 window,.open(address ) ; 
7 }); 

在 第 3 行 , 我 们 使 用 event target 来 获取 用 户 实 际 点 击 元 素 的 引用 。 之 后 可 以 将 其 封 交 到 一 
个 jQuery 对 象 中 来 操作 。 即 使 动态 添加 新 元 素 到 页 面 #Links 所 标识 的 范围 里 , 这 种 方式 也 能 很 好 
地 工作 。 


有 时 候 , 我 们 需要 对 监听 事件 做 一 些 更 为 特殊 的 处 理 , 那 就 可 以 考虑 在 父 元 条 上 定义 事件 处 
理 方法 ， 然 后 正确 指定 触发 该 事件 的 具体 元 素 ， 代 码 如 下 所 示 : 


























links.on("click","a" , function (event)t 
element = $(this),; 
// 更 多 代码 

} 7 


在 这 个 示例 中 , 我 们 传人 作为 第 二 个 参数 的 选择 天 给 on( ) 方 法 。 用 此 方式 可 以 获得 与 前 一 个 
示例 相同 的 效 来 , 但 这 给 了 我 们 更 大 的 灵活 性 ; 如 朱 我 们 有 一 个 含有 大 量 元 素 、 且 有 不 同事 件 需 
要 监听 的 容 天 ,这 个 方式 将 帮助 我 们 很 容易 地 将 各 种 元 系 和 对 应 事件 联系 在 一 起 ; 反之 ,如 末 仅 
仅 在 父 元 系 上 触发 点 击 事件 ， 将 捕获 所 有 的 点 击 事件 并 会 造成 事件 骨 泡 。 














B.5.3 ”原始 事件 


当 我 们 调用 一 些 诸 如 on() 、ctLick() 这 样 的 jQuery 事件 晒 数 时 ，jQuery 会 使 用 目 己 的 对 象 来 
封装 JavaScript 事 件 , 并 提供 一 些 只 有 在 这 个 封装 对 象 上 才能 使 用 的 属性 。 有 时 候 , 我 们 需要 获取 
实际 的 JavaScript 事 件 ， 以 便 访 问 并 未 被 映射 到 jQuery 封 凌 对 象 上 的 属性 。 通 过 一 个 相应 的 名 为 
originaLEvent 的 属性 ，jQuery 事 件 可 以 让 我 们 访问 原始 事件 。 比 如 ， 可 以 按 以 下 方式 访问 
onmessage 事 件 的 data 必 性: 


$(window) .on("message",function(event)t 
var message data = event.originalEvent.data; 











}); 
你 可 以 通过 这 种 方式 来 调用 原始 事件 的 属性 或 方法 。 


B.6 文档 束 绪 


“不 唐 突 的 JavaScript” 是 指 JavaScript 与 内 容 之 间 保 持 完 全 的 分 离 。 与 在 HTML 元 素 上 直接 添 
加 onctLick 事 件 不 同 , 我 们 使 用 上 一 和 中 编写 事件 处 理 方 法 的 方式 。 在 不 改变 文档 本 吴 的 情况 下 ， 
悄悄 地 为 文档 添加 行为 。 

这 种 方式 的 一 个 缺点 是 JavaScript 在 文档 中 的 元 素 被 声明 之 前 , 是 “看 不 见 ” 这 些 元 素 的 。 如 
和 我 们 在 文档 的 <head> 标 签 中 加 载 JavaScript 代 码 ，JavaScript 代 码 就 会 立即 被 执行 ， 并 且 这 时 候 
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我 们 要 交互 的 元 素 还 不 可 用 ， 因 为 它们 还 未 被 浏览 需 泻 染 


可 以 在 window,.onLoad() 事 件 处 理 方法 中 封 猴 JavaScript 代 但 ， 但 这 个 事件 只 有 在 所 有 内 容 
被 加 载 之 后 才 会 触发 。 这 会 导致 延 时 , 意味 着 用 户 在 事件 绑 定 到 元 素 之 前 就 可 以 操作 元 素 了 。" 我 
们 需要 考虑 另 一 种 方式 ， 在 DOM 结 构 绘 制 完毕 但 又 还 未 显示 的 时 候 ”* 添 加 事件 。 


jQuery 的 document , ready() 事 件 处 理 方法 正 是 我 们 要 找 的 方式 ， 并 跨 浏 览 器 支持。 用 法 如 
下 所 示 : 




















jqueryprimer/ready.html 


$(document).ready (function() { 
alert("Hi! I am a popup that displays when the page loads"), 
}); 


正如 你 多 次 所 见 ，document . ready() 还 有 一 个 简写 形式 ， 如 以 下 代码 所 示 : 





jqueryprimer/ready.html 


$(function() { 
alert("Hi! I am a popup that displays when the page loads"), 
}); 


在 JavaScript 应 用 开发 中 , 通过 document . ready () 来 加 载 JavaScript 代 码 是 一 个 极其 党 用 的 设 
计 模 式 。 人 然而 , 我们 往往 通过 将 外 部 JavaScript 脚 本 文件 的 调用 代码 放 在 </body> 闭 标签 之 前 ,来 
完全 替代 使 用 document . ready ( ) 的 方式 。 只 要 没有 脚本 代码 异步 改变 DOM， 就 不 用 担心 这 么 做 
是 否 有 问题 。 不 过 ， 在 无 法 控制 脚本 的 加 载 顺 序 ， 或 者 元 率 将 被 无 序 创建 的 情况 下 ,使 用 
document. ready() 才 是 正确 的 选择 。 


B.7 合理 使 用 jQuery 


尽管 jQuery 库 的 功能 非常 多 ， 但 并 不 总 是 必需 的 。 如 果 只 需要 通过 ID 来 定位 页 面 元 素 ， 最 好 
还 是 使 用 传统 方式 : 


navbar = document .getElLementById("#navbar"), 
只 为 个 别 需 求 而 加 载 jQuery 库 未 免 有 些小 题 大 做 。 现 代 浏 览 套 已 经 可 以 实现 jQuery 的 大 部 分 
功能 ， 比如 document.querySelector() 和 document.querySelectorAl1l(), 在 现代 浏览 器 中 ， 
这 些 方法 用 于 通过 CSS 选 择 需 来 选择 元 素 ， 语 法 也 跟 jQuery 类 似 : 

















OD 指 先 完成 泻 染 的 部 分 元 素 ， 例 如 我 们 有 个 <a> 标 签 ， 本 来 希望 点 击 它 时 执行 我 们 添加 的 点 击 事件 处 理 方法 ， 但 由 
于 此 时 JavaSeript 代 码 尚 未 执行 ,点 击 它 就 会 触发 默认 的 打开 链接 事件 , 而 不 是 调用 我 们 添加 的 点 击 事件 处 理 方法 。 
一 一 译 者 注 








@) 即 DOM 结 构 绘制 完毕 但 还 没 加 载 时 。 一 -一 译 者 注 
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links = document.querySelectorAll("a.pPopup"); 


在 jQuery 能 够 让 你 的 生活 变 得 更 轻松 时 使 用 它 。 发 现 不 用 jQuery 反而 会 更 合适 时 ,不 要 因为 
放 径 它 而 感到 不 安 。 








这 里 简单 介绍 了 jQuery 功能 。 除 了 文档 操作 功能 ，jQuery 还 提供 了 大 量 方法 ， 如 表单 序列 化 
以 及 Ajax 请 求 、 人 简化 循环 和 DOM 遍历 操作 的 实用 函数 , 等 等 。 一 旦 你 对 jQuery 的 使 用 得 心 应 手 了 ， 
必定 会 在 你 的 项 目 中 找到 更 多 有 关 jQuery 的 极 客 功能 。 








针对 Web 的 吾 频 和 视频 编码 


对 音频 和 视频 进行 编码 , 借助 HIMLS 的 <audio> 和 <video> 标 签 来 提供 使 用 , 这 是 一 个 复杂 
的 话题 , 已 超出 了 本 书 的 范围 , 但 如 果 有 一 天 你 需要 准备 自己 的 多 媒体 内 容 , 和 希望 这 个 简单 的 附 
录 介 绍 能 够 为 你 提供 正确 的 指引 。 





C.1 首 频 编码 


你 需要 将 视频 文件 编码 成 MP3 和 Vorbis 格 式 ， 以 方便 更 多 的 受众 ， 要 完成 这 项 工作 ， 和 需要 伞 








对 于 编码 MP3 文 件 ，LAME 将 带 给 你 最 佳音 质 。" 在 编码 时 你 会 考虑 使 用 可 变 比 特 率 。 通 过 
以 下 命令 ， 就 可 以 获得 高 品质 编码 的 MP3 文 件 : 

$ Lame in.wayv out.mp3 -V2 --vbr-new -q0 --lowpass 19.7 

对 于 编码 Vorbis 音 频 文件 ， 可 以 借助 Oggenc ”来 编码 一 个 设 定 了 某 个 可 变 比特 率 的 优质 音质 
的 Vorbis 文 件 ， 命 令 如 下 所 示 : 

$ oggenc -9q 3 inputfile.wav 

你 可 以 通过 Hydrogen Audio 网 站 来 了 解 更 多 关于 MP3 和 Vorbis 编 码 的 信息 。 ”该 网 站 上 的 有 关 
内 容 非 常 不 错 ， 当 然 ， 你 还 需要 不 断 实践 设置 方法 ， 以 达成 目 己 的 目标 ， 并 满足 听众 的 需要 。 





C.2 视频 编码 


使 用 HTML5 视 频 技 术 时 ， 如 果 打 算 尽 可 能 满足 各 个 平台 的 需要 ， 就 应 该 将 视频 文件 编码 成 
多 个 格式 。 将 视频 文件 编码 成 H.264、Theora 以 及 VP8 格 式 的 工作 是 非常 耗 时 的 ,无论 是 设置 开源 








(QD) http://lame.sourceforge.net/ 

@) http://wiki.xiph.org/Vorbis-tools 

@) 使 用 LAME 编 码 MP3 文 件 请 参考 http://wiki.hydrogenaudio.org/index.php?title=Lame#Quick start .28short answer.29， 
编码 Vorbis 文 件 请 访问 http://wiki.hydrogenaudio.org/index.php?title=Recommended Ogg Vorbis。 
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编码 器 如 FFmpeg。 "”， 还 是 实际 运行 编码 任务 在 这 里 ， 我 们 没有 足够 的 篇 幅 来 详细 讲解 FFmpeg 
的 命令 ， 其 使 用 WebM 容 融 将 视频 文件 转换 为 VP8 和 Vorbis 格 式 文 件 : 


ffmpeg - 工 bLUr.mov 
-f webm -vcodec libvpx vp8 -acodec Libvorbis 
-ab 160000 -Samed 
blur .webnm 


如 果 你 想 省 了 自己 动手 处 理 的 麻烦 ， 可 以 考虑 使 用 Zencoder”Web 服 务 来 将 你 的 视频 文件 编 
码 成 所 有 必须 的 格式 ， 以 使 用 HTML5S 视 频 功 能 。 将 视频 文件 放 在 Amazon S3 云 服务 或 其 他 位 置 ， 
接 下 来 就 可 以 借助 Zencoder 的 Web 接 口 或 API 调 用 来 设置 任务 ， 并 将 视频 文件 编码 成 多 种 格式 。 
Zencoder 会 提取 视频 文件 ， 并 进行 编码 ， 之 后 将 新 的 视频 格式 文件 回 传 给 你 所 在 的 服务 硕 。 
Zencoder Web 服 务 并 非 免 费 ， 但 它 能 够 生成 质量 上 乘 的 各 种 格式 的 视频 文件 ， 如 果 你 有 大 量 需 要 
转换 的 内 容 ，Zencoder 将 帮 你 节省 大 量 处 理 时 间 。” 


Miro 视 频 转 换 器 是 一 个 很 棒 的 开源 选择 ， 并 且 是 免费 的 。 它 预 设 了 将 视频 文件 转换 成 各 种 
输出 格式 文件 的 功能 ， 并 可 以 批量 编码 。 

将 视频 文件 编码 成 多 种 格式 的 操作 非常 耗 时 ， 因 此 , 在 你 按 下 编码 按钮 之 前 , 请 确保 视频 的 
完整 性 和 正确 性 。 如 有 可 能 ， 先 编码 一 小 段 视频 并 不 断 测试 以 找到 合适 的 设置 方式 。 























GD http:/www.ffmpeg.org/ 

@) http://www.zencoder.com/ 

@) 开 诚 布 公 地 说 ， 提 供 Zencoder Web 服 务 的 公司 叫 Brightcove， 我 认识 该 公司 的 几 个 开发 人 员 。 即 使 没有 这 层 关 系 ， 
我 也 会 推荐 这 个 服务 。 


(4) www.mirovideoconverter.com/ 





相关 筑 产 











Apple 一 一 HTMILS http:/www.apple.comy/htmlS/Apple 的 页 面 ， 有 关 
Safari 浏 览 器 所 支持 的 HIMLS 及 Web 标 准 。 

Can I Use... http://caniuse.com/HTML5、CSS3 及 相关 技术 的 
浏览 融 兼 容 性 参考 表格 。 

CSS3.Info http://www.css3.info/ 有 关 组 成 CSS3 的 各 种 模块 
的 大 量 痛 景 信息 和 示例 。 

Font Squirrel http://www.fontsquirrel.com 提 供 各 种 格式 的 人 锡 
版 税 字体 ， 适 用 于 在 Web 上 分 发 。 

HTMLS http:/www.w3.org/TR/html5/ 万 维 网 联盟 网 站 上 
的 HTML5 官 方 规范 。 

HTMLS Mozilla Developer Network. ttps://developer.mozilla.org/en/html/htmlSMoz1illa 


HTMLS Cross Browser Polyfills 


开发 者 网 络 上 的 HTML5 专 题 页 面 


https://github.com/Modernizr/Modernizr/wik1/ 
HTML5-Cross-browser-Polyfills 我 们 和 常常 需要 
在 不 支持 HTML5 和 CSS3 特 性 的 浏览 器 上 ， 实 
现 HTML5 和 CSS3 特 性 支持 的 回 退 方案 ， 这 个 
站 点 为 实现 回 退 方案 提供 了 一 个 全 面 的 填充 物 
列表 。” 


中 浏览 如 不 支持 一 些 特性 时 ， 可 以 考虑 使 用 其 他 一 些 脚 本 (第 三 方 的 或 自己 写 的 ) 来 作为 回 退 方案 ， 这些 脚 本 包含 
了 跟 标准 特性 同样 名 称 及 行为 的 某 些 属性 和 方法 ,通常 这 些 脚 本 被 称 为 填充 物 ( Polyfills )。 这 可 以 让 开发 者 按 标 
准 方式 编程 ， 且 在 以 后 浏览 融 文 持 这 些 新 特性 时 ， 不 需要 改变 原来 的 代码 ， 同 时 ， 在 当前 浏览 硕 不 文 持 新 特性 的 








情况 下 ， 应 用 也 可 得 到 回 退 文 持 。 一 一 译 者 注 
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HTMLS Please 


Internet Explorer 10 Guide for Developers 


Microsoft IE Test Drive 


Kira’s Web Toolbox: “Setting Up a Flash 
Socket Policy File” 


Typekit 


Unit Interactive: “Better CSS Font Stacks” 


Video.js 


WebPlatform.org 


http://htmlSplease.com/ 为 现在 能 够 使 用 哪个 
HTML5 特 性 以 及 应 该 避免 使 用 哪个 特性 提供 
即时 建议 。 

http://msdn.microsoft.com/library/ie/hh673549.aspx 


提供 正 10 和 Windows 商 店 应 用 所 文 持 的 HIMLS、 
CSS3 及 JavaScript 的 详细 信息 。 


http://ie.microsoft.com/testdrive/ 提 供 可 在 下 10 中 
运行 的 HTML5 或 相关 特性 的 演示 示例 。 





http:/www.lightsphere.com/ 

dev/articles/flash socket policy.html 包 含 了 Web 
Sockets 回 退 方案 中 用 到 的 Flash Socket 束 上 略 文 
件 的 详细 描述 。 

http://www.typekit.com 通 过 一 个 简单 的 JavaScript 
API, 为 在 你 的 网 站 上 使 用 正版 字体 提供 服务 。 
http://unitinteractive.com/blog/2008/06/26/better- 


css-font-stacks/ 讨 论 字 体 栈 (Font stacks )， 并 带 
有 一 些 很 樟 的 示例 。 

http:/videojs.com 一 个 JavaScript 库 ， 用 于 HIMLS$ 
视频 播放 功能 的 回 退 方 案 。 
http:/webplatform.org/ 提 供 了 HTMLS 、CSS 、 
JavaScript 以 及 相关 技术 的 丰富 文档 和 教程 。 
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